• 物理像素:移动端设备的分辨率
  • 独立像素:css的像素 320 375
  • 像素比 = 物理像素/独立像素
1

  • width=device-width 设备宽度 640px(低版本的安卓手机不支持数字) 这个属性在不支持IE

  • initial-scale=1.0(初始缩放比),能够起到和width=device-width相同的效果(把理想的视窗设置为设备的宽度) 两个配合使用就能够很好的解决移动端各设备的适配问题

  • maximum-scale=1.0最大缩放比例

  • user-scalable=0禁止缩放
  • minimum-scale=1.0 最小缩放比例

移动端布局方法


  • 1、流式布局 与设备等宽 做自适应 100%或者具体的像素值

  • 2、rem做盒子的宽度,viewport缩放

  • 3、固定宽度 viewport缩放 content="width=640, initial-scale=0.5, maximum-scale=0.5, user-scalable=0"(用的比较少)

  • 4、vw/vh 相对于viewport理想视窗(设备)的比例(兼容性不好)
    1vw = 10%设备宽 10vw

meta标签属性设置


  • IE8浏览器的显示方式:IE=edgeIE`最高版本显示
  • chrome=1 以谷歌浏览器模式渲染(GCF(Google Chrome Frame))
1

  • referrer 告诉浏览器链接来源于哪里(计算网页上链接的访问量)
1

  • 格式检测:(数字、邮箱、地址) no不识别为电话号码、邮箱、地址
1

  • 删除默认的苹果工具栏、菜单栏(全屏显示)
1

  • 全屏显示
1

  • 设置app应用下状态条的颜色
  • 默认值default (白色) black(黑色)
  • black-translucent(灰色半透明)若果设置为这个值会占据页面的px位置浮在页面上方20px高度 iphone440px
1

  • 360模式固定为极速模式

常见的meta属性


1
2
3
4





1

预解析技术,当浏览网页时,浏览器会在加载页面的时对页面中的域名进行解析缓存,当我们点击这些网页的链接时就不需要再进行DNS的解析,减少用户的等待时间,提高用户的体验度

  • rem 根目录 htmlfont-size尺寸默认为16px 1rem = 16px;
  • 1rem = htmlfont-size的尺寸大小

参考学习资料


转载请保持原始链接

原始链接: https://ru23.com/note/783ce8a9.html