移动web开发中的viewport

移动web开发需要面临的问题

• 浏览器问题
  主流基于webkit内核，使用h5,css3
• 适配问题
  解决方案：
  使用百分比自适应布局，即流式布局 (width = 100%)
  使用viewport 视口

关于viewport视口

• viewport是移动设备中，浏览器和网页中间的一个虚拟的容器

• viewport只有在移动设备中才有，用来承载网页的

• viewport在大部分情况下默认宽度是980px

• viewport使用在<meta>标签中
  <meta name="viewport" content="width= device-width initial-scale=1.0">

• viewport的参数有
  -width 宽度 单位默认为px，特殊值为device-width
  -initial-scale 视口的默认缩放比
  -user-scalable 是否允许用户自行缩放
  -minimum-scale 最小允许缩放比
  -maximum-scale 最大允许缩放比

知道有viewport后，查看淘宝的网页，发现在iphone4、5时initial-scale为0.5，在6plus时initial-scale是0.3333333，这时引出一个像素问题

• 物理像素比：即一个px的宽度可以放几个物理像素

在新的设备中 高清显示屏的物理像素比变大了，显示时图片变大“像素比”的倍数，因此会有图片失真的问题。 因此淘宝页面会进行非标准化的设置。

针对移动端的一些配置
css

• box-sizing:border-size //让所有的元素、盒子都从边框开始计算宽度，防止边框溢出，出现滚动条
• “-webkit-box-sizing : border-size” 让更低一些的浏览器也支持
• “-webkit-tap-highlight-color:transparent” //点击时的背景颜色，可以是颜色属性，设成transparent则表示是透明的，即将点击时的高亮效果清除
• “-webkit-appearence:none;”清除移动端输入框特有的样式
  css会有重置样式和公用样式