你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
weifengsn

iOS9 带来的initial-scale的变化 4个回复 专栏 @ CSS

weifengsn 发布于 2 年前

initial-scale的介绍

先看一段代码

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

在网页的

中增加以上这句话,可以让网页的宽度自动适应手机屏幕的宽度。
其中:

  • width=device-width :表示宽度是设备屏幕的宽度
  • initial-scale=1.0:表示初始的缩放比例

如果页面中有一个元素的宽度超过手机的viewport宽度的话,iOS8以下包含8跟iOS9的表现不一样,具体如下:

iOS8及之前的表现:

请忽略其中的文字

iOS9的表现(微信内置浏览器也一样):

可以看到内容被缩放以适应屏幕的宽度,或许你的页面不希望被缩放,那么怎么解决呢?
添加shrink-to-fit=no完美解决问题。

meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no" />

问题的原因

据说是苹果在iOS9更新中更改了initial-scale的用途,使用shrink-to-fit=no来替代。

登录后回复,如无账号,请使用邀请码注册