移动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会有重置样式和公用样式