viewport

作者: Veycn | 来源:发表于2019-03-28 12:13 被阅读0次

    在移动端,html的默认宽度一般是980px。但是有的型号不同,这个值也会不同。可以使用document.documentElement.clientWidth获取这个值。能获取到980px必须是没有加上viewport属性的mata标签后面的content内容的情况下, 才能拿到, 否则拿到的是设备的宽度 。

    有了这一行东西存在,再去获取document.documentElement.clientWidth的时候, 就是正常的值了(iphone6/7/8=375)

    viewport 的 content

    width: 定义视口的宽度,值为一个正整数, 或者字符串device-width(设备实际宽度 css 像素)
    height:一般不会管这个高度, 因为高度是靠内容撑起来的。
    user-scalable: 是否允许用户和浏览器的缩放。
    initial-scale:页面初始缩放值。计算方式: css像素 / viewport 的宽度
    maximum-scale: 最大允许缩放比例
    minimum-scale: 最小允许缩放比例

    content="width=400, initial-scale=1.0"同时存在的时候,实际计算出来谁大取谁的值。所以在设备尺寸不同的时候, 他俩是不能做适配的。

    一般来说, 做适配的时候, 需要如下设置, 禁止一切非开发者掌控的行为, 然后适配成用户可以最佳体验的大小(原生APP为啥不能缩放?), 这些缩放也就没有必要了。


    image.png

    相关文章

      网友评论

          本文标题:viewport

          本文链接:https://www.haomeiwen.com/subject/jozfbqtx.html