javascript - 如何识别屏幕尺寸

Question

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

在 iPod 上，按钮的大小已经发生了一些变化。因此，可能有任何方法可以使用 js 来识别屏幕大小，如类别（小、正常、大或可能只是获取数组的大小列表），然后基于它我会在源代码中做一些基本的更改.

Answer 1

我强烈建议使用 css 媒体查询，而不是在 js 中识别宽度并以此为基础提供样式表。

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

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

Answer 2

您可以使用 jquery 获取屏幕高度宽度，例如

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

你没有得到像小，大等尺寸规格。

您已经使用屏幕宽度和高度自己编写了响应式代码。

Answer 3

使用 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
    }    
}