• HTML移动端开发案例


    一、视口

    缩小屏幕宽度 刷新页面 打开手机 sina.cn

    查看源代码 找到如<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no" id="viewport" />

    width=device-width 视口为设备宽度(就是人设置的一个宽度)
    initial-scale=1.0 初始化的视口大小是1.0倍
    maximum-scale=1.0 最大的倍数是1.0倍
    user-scalable=0 不允许缩放视口

    将 <meta name="viewport" content="width=device-width" />

    改为

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    运行 在服务器上

    打开 http://cli.im/ 草料二维码

    将 http://localhost/04_约束视口.html 网址添加进去生成二维码下载即可

    查看自己手机宽度值是多少

    1、给我们的页面加上一条meta语句:
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
    继续用document.documentElement.clientWidth来测试宽度。你会发现,宽度不一样了。

    不同设备的测试结果:
    iphone6plus 414
    锤子T2 360
    小米Note 393
    摩托罗拉 411

    这个meta标签,就是“视口约束”。约束之后的视口宽度,和设备宽度相同,实际上就是人为设置的数字。每个设备出厂前都会设置一下约束视口之后的宽度。
    约束之后的视口宽度,不是自己的分辨率!!每个手机的分辨率,都要比自己的视口宽度大得多得多!

    可以通过chrome 模拟iPhone 添加/删除 meta name="viewport" 测试宽度值

    如使用iphone6 plus 测试

    不添加 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    是 980 字非常的小 相当于高空俯瞰页面

    添加 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />

    是 414 字很大


    将<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />


    改为


    <meta name="viewport" content="width=320” />

    在将 <h1 id="biaoti"></h1>

    改为 <h1 id="biaoti">我是一个主标题</h1>


    在将 biaoti.innerHTML = document.documentElement.clientWidth; 注释掉

    运行


    改为 <meta name="viewport" content="width=420" />

    运行

    改为 <meta name="viewport" content="width=520" />

    运行

    改为 <meta name="viewport" content="width=980" />

    运行


    结论: 视口越小,字越大。 视口越大,字越小。

  • 相关阅读:
    MySql常用日期时间查询
    微信开发中网页授权access_token与基础支持的access_token异同
    Sqlserver复杂查询
    Array排序和List排序
    关于java按位操作运算
    验证redis的快照和AOF
    线程安全 加锁机制
    Redis 与 数据库处理数据的两种模式
    redis实现点击量/浏览量
    jsp网站访问次数统计的几种方法
  • 原文地址:https://www.cnblogs.com/ran849340618/p/5914127.html
Copyright © 2020-2023  润新知