11

我正在开发一个需要在桌面和移动设备上工作的网站。现在我有一个设置为屏幕宽度 70% 的主要内容 div。但是，我觉得这对于移动设备（例如手机，而不是平板电脑）来说太小了，并且希望将其提高到 90% 或 95% 我怎样才能做到这一点（比如屏幕尺寸小于 5 英寸）而不使用非常不可靠浏览器嗅探？我一遍又一遍地听到“特征检测特征检测特征检测”的口头禅，我明白为什么这是一件好事……但我不知道要针对这个问题检测什么“特征”……

谢谢。

4

6 回答 6

6

您可以使用 CSS：

@media screen and (max-width:500px) {
  /* smaller screens */
}

@media screen and (max-width:960px) {
  /* bigger screens */
}
于 2013-07-01T16:31:17.307 回答
2

您可以使用一些 javascript 获得屏幕大小的近似值

function getScreenSizeInches() {    
    var temp =  document.createElement("div")
    temp.style.overflow='hidden';
    temp.style.visibility='hidden';
    document.body.appendChild(temp)
    temp.style.width = "10in"
    var dpi = temp.offsetWidth / 10;
    return screen.width / dpi + 'x' + screen.height / dpi;
}

请参阅以下小提琴以了解其在动作vanillajs或jquery中的使用。

jQuery版本：

function getScreenSizeInches() {    
    var $temp =  $('<div style="overflow:hidden;visibility:hidden;width:10in"/>').appendTo('body'),
       dpi = $temp[0].offsetWidth / 10;
    return screen.width / dpi + 'x' + screen.height / dpi;
}

正如评论中所指出的那样，这种技术可能非常不准确，所以我不会将它用作屏幕尺寸提示之外的任何东西......

于 2013-10-19T22:49:00.657 回答
1

你可以使用 CSS：

/*Here goes the CSS for all screens*/

@media handheld {

    /*Here goes the CSS for mobile phones and tablets*/

}

编辑：

另一个建议：

viewport在您的 html 中设置元标记：

<meta name="viewport" content="width=device-width, height=device-height" />

现在您可以像这样获得尺寸：Get the browser viewport dimensions with JavaScript

于 2013-07-01T16:33:44.793 回答
0

您可以使用简单的 javascript 来检测它，而不是使用 jquery：

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {

}

或者您可以将它们结合起来，使其更易于通过 jQuery...

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry/i.test(navigator.userAgent.toLowerCase()));

现在 $.browser 将为所有上述设备返回“设备”

于 2013-07-02T18:48:39.377 回答
0

现在你可能可以使用 Screen API。screen.height 或 screen.width

https://www.w3schools.com/jsref/obj_screen.asp

https://caniuse.com/#feat=mdn-api_screen

于 2020-01-09T04:36:58.787 回答
-1

要获得物理尺寸，您不能使用 Javascript，而是使用 jQuery 来获得屏幕尺寸

$(document).ready(function(){
   var elem = document.createElement("div");
   $(elem).attr("id", "removeMe").css({"width":"100%", "height":"100%", "position":"absolute", "top":"0", "left":"0"});
   $("body")[0].append(elem);

   width = $("body #removeMe").width();
   height = $("body #removeMe").height();
   $("body #removeMe").remove();
});

这将为您提供屏幕的像素大小。但是我会将此与@Abhi jQuery answer之类的移动检查结合起来，您需要将此代码放入窗口调整大小事件处理程序中，因此如果移动屏幕旋转已打开并打开，您将获得新的测量值

于 2013-09-12T11:42:54.967 回答