参数:
Viewport:可视区域
Width:viewport的宽度,取值device-width
Initial-scale:初始缩放比例,取值1.0
Minimum-scale:允许用户缩放最小比例,取值1.0
Maximum-scale:允许用户放大最大比例,取值1.0
User-scalable:是否允许用户缩放
MobileOptimized浏览器不会自动调整文件大小,无法拉伸缩放
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0">
<meta name=“format-detection” content=“telephone=no”>
<meta name="format-detection" content="email=no">
<meta name="format-detection" content="address=no">
4 移动端涉及的前端技术
4.1 html5
语义更好,设备兼容特性更好,支持网页端的Audio、Video等多媒体功能, 能通过简单的代码实现更炫的效果,可以进行跨平台的使用,等等……
4.2 css3
强大的层叠样式表加强版,能通过简单的代码实现圆角,阴影,颜色渐变等等效果,减少图片的应用,增加用户体验。
4.3 js
Zepto.js。移动页面中的jquery,轻量级的手机js框架,Gzip压缩后9.7k,能完成各种dom结构操作,ajax请求,触屏事件,等等。
4.4 响应式布局搭建利器
foundation ,Ink,grumby,Maxmertkit,Bootstrap等等
利用这些利器,能够快速搭建适应各种屏幕分辨率的自适应布局。
4.5测试工具
远程调试工具weinre
www.(csdn放太多网址竟然保存不了,晕死,www.开头)
npmjs.org/package/weinre(csdn放太多网址竟然保存不了,晕死,www.开头)
五.移动端的兼容和处理
总结了一些:
1.分辨率兼容(包括布局,断点设置)
2.图片兼容(主要体现在页面设计和css处理)
3.导航的设置
Author: Alone
Antroduction: 高级前端开发工程师
Sign: 人生没有失败,只有没到的成功。