0

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

2个回答

0

可以加入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:

0

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

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

撰写答案