javascript - 元素定义宽320px，高200px时，在 Iphone 5s 中看到这个元素竟然只占据了屏幕大小（宽）的三分之一左右，为什么？

Question

给一个元素定义宽为320px，高为200px时，在 Iphone 5s 中看到这个元素竟然只占据了屏幕大小（宽）的三分之一左右。这是为什么呢？
我百度了设备像素，设备独立像素，dpr.但是我还是不能理解为什么？能帮解释一下吗？
最好通俗点

Answer 1

可以加入meta标签 加入viewport设置，来看看效果。

比如：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

• height：和 width 相对应，指定高度。

• initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

• maximum-scale：允许用户缩放到的最大比例。

• minimum-scale：允许用户缩放到的最小比例。

• user-scalable：用户是否可以手动缩放。

下面是两个菜鸟教程的例子：响应式 Web 设计 - Viewport

没有添加 viewport：

添加 viewport:

Answer 2

根据你的问题，感觉原因没那么复杂，就是个默认宽度的问题。
各设备上浏览器的默认viewport的宽度可参考这里
所以呢320/980就是大概1/3

其他的设备像素，设备独立像素，dpr那些就是楼上的回答加了meta之后的才用的上的东西。