0

在主 HTML 文件中，指定了以下视口行：

<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" name="viewport">

实验：

我试图在初始化时更新widthfrom并将以下代码添加到 JavaScript 文件中device-width。640

alert("Viewport - Width: " + $(window).width() + "Height: " + $(window).height());
alert("Device - Width: " + window.screen.width + "Height: " + window.screen.height);

结果：

  1. 三星 Galaxy S3（分辨率：720 x 1280）：（
    a）宽度=设备宽度和宽度=640：
    视口 - 宽度：360，高度：615
    设备 - 宽度：720，高度：1280

  2. iOS 模拟器 iPhone (Retina 3.5 - 英寸):
    (a) width=device-width:
    Viewport - Width: 320 Height: 460
    Device - Width: 320 , Height: 480
    (b) width=640:
    Viewport - Width: 640 Height: 960
    设备 - 宽度：320，高度：480

问题1：在我看来，Android WebView 不是基于视口设置的。在测试结果中，视口的宽度是360而不是720。“360”的值是从哪里来的？

问题 2： iPhone Retina 3.5 的分辨率是 640 x 960。是不是因为 Retina 显示所以宽度和高度分别返回 320 和 480？

4

2 回答 2

0

问题1：查看AndroidManifest.xml 将“android:largeScreens”改为true

于 2013-11-07T23:55:21.713 回答
0

根据 PPK，移动设备中有 3 个视口。[阅读更多]

得到的window.screen.width是理想的视口尺寸，也就是说iPhone的理想视口尺寸的宽度是320px，而Android的是360px。

这与屏幕密度有关，例如，屏幕宽度为 720 像素的 Andorid 设备将放大 2 倍以匹配其理想的视口大小。

于 2016-09-08T07:32:14.733 回答