Question

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

感谢。

Answer 1

您可以使用CSS：

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

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

Answer 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;
}

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

Answer 3

你可以使用CSS：

/*Here goes the CSS for all screens*/

@media handheld {

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

}

修改：

另一个建议：

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

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

现在您可以获得如下尺寸：Get the browser viewport dimensions with JavaScript

Answer 4

您可以使用简单的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将为所有上述设备返回“设备”

Answer 5

这几天，您可能可以使用Screen API。 screen.height或screen.width

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

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

Answer 6

要获得物理大小，你不能使用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答案之类的移动检查相结合，你需要将此代码放入窗口调整大小事件处理程序中，这样如果移动屏幕旋转打开并且被转动你就会有新的测量

如何检测手机浏览器的屏幕尺寸？

6 个答案: