分享

iOS9 带来的initial

 迷津_渡口 2017-08-30

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来替代。

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多