• 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" />

    运行


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

  • 相关阅读:
    c++ STL
    unix network programming(3rd)Vol.1 [第1章]《读书笔记系列》
    [面试题] BloomFilter 无序40亿不重复 uint 整数, 给予任意的数,求是否在这40亿之中 + 无序数组中找2个相同的值
    stm32 DAC输出音频
    Go语言项目的错误和异常管理 via 达达
    值传递
    FireFox、chrome通过插件使用IE内核,IE Tab v2
    linux cross toolsChain 交叉编译 ARM(转)
    rfc all download
    VS2005 工程在win7下使用管理员权限运行
  • 原文地址:https://www.cnblogs.com/ran849340618/p/5914127.html
Copyright © 2020-2023  润新知