如何识别屏幕尺寸

Question

我正在开发一些移动网络应用程序（它是我的第一次）并且我遇到了这样的问题：尽管使用了特殊的移动框架，但某些尺寸的模态窗口在小屏幕上是不正确的。例如我有一个ipod和ipad：

在iPod上，按钮的大小已经改变了一点。所以，可能有任何方法来识别屏幕大小类似的类别（小，正常，大或可能只是得到数组的大小列表）使用js可能然后基于它我会在源中做一些基本的更改。

Answer 1

您可以使用jquery（例如

）获取屏幕高度宽度

alert("Width :"+$(window).width()+" Height :"+$(window).height());

您没有像小型，大型等那样获得尺寸规格。

您已使用屏幕宽度和高度自行编写响应代码。

Answer 2

使用jquery查找窗口的当前宽度

$(function() {
    showWidth($(this).width());
    $(window).resize(function() {
        showWidth($(this).width());
    });
});

function showWidth(wid) {
     var width = parseInt(wid);
     if (width < 1440) {
        //use wider stylesheet
    } else if ((width >= 901) && (width < 1440)) {
        //use wide stylesheet
    } else {
        //use small stylesheet
    }    
}

Answer 3

我强烈建议使用css media-queries而不是基于j来识别js中的宽度和服务样式表。

CSS媒体查询是标准化的：http://www.w3.org/TR/css3-mediaqueries/

另请参阅此处的示例和用法：http://css-tricks.com/css-media-queries/