手机移动端资源整合.pdfVIP

meta 基础知识 H5 页面窗口自动调整到设备宽度，并禁止用户缩放页面 meta name=viewport content=width=device-width,initial-scale=1.0,minimum-sc ale=1.0,maximum-scale=1.0,user-scalable=no / 忽略将页面中的数字识别为电话号码 meta name=format-detection content=telephone=no / 忽略 Android 平台中对邮箱地址的识别 meta name=format-detection content=email=no / 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对 ios 的 safari meta name=apple-mobile-web-app-capable content=yes /!-- ios7.0版本以后， safari上已看不到效果 -- 将网站添加到主屏幕快速启动方式，仅针对 ios 的 safari 顶端状态条的样式 meta name=apple-mobile-web-app-status-bar-stylecontent=black/!--可选de fault、black、black-translucent -- viewport 模板 viewport 模板——通用 !DOCTYPE htmlhtmlheadmeta charset=utf-8meta content=width=device-w idth,initial-scale=1.0,maximum-scale=1.0,user-scalable=no name=viewportm eta content=yes name=apple-mobile-web-app-capablemeta content=black nam e=apple-mobile-web-app-status-bar-stylemeta content=telephone=noname=f ormat-detectionmeta content=email=no name=format-detectiontitle标题 /titlelink rel=stylesheet href=index.css/head body 这里开始内容/body /html viewport 模板 – target-densitydpi=device-dpi ，android 2.3.5 以下版本不支持 !DOCTYPE htmlhtmlheadmeta charset=utf-8meta name=viewport content= width=750,user-scalable=no, target-densitydpi=device-dpi!-- width 取值与页面 定义的宽度一致 --meta content=yes name=apple-mobile-web-app-capablemeta content=blackname=apple-mobile-web-app-status-bar-stylemeta content=te lephone=no name=format-detectionmeta content=email=no name=format-dete ctiontitle标题/titlelink rel=stylesheet href=index.css/head body 这里开始内容/body /html 参考案例： /payact/readtemplate?t=mobile/2015/wxzfsht/ind ex_tmpl 常见问题 移动端如何定义字体 font-family 中文字体使用系统默认即可，英文用 Helvetica /* 移动端定义字体的代码 */ body{font-family:Helvetica;} 参考《移动端使用字体的思考》 移动端字体单位 font-size 选择 px 还是 rem 对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用 px 即可 对于需要适配各种移动设备，使用 rem，例如只需要适配 iPhone 和 iPad 等分辨率差 别比较挺大的设备 rem 配置参考： html{font-size:10px}@media screenand (min-width:321px)and (max-width:375px){ht ml{font-size:11px}}@media screenand (min-width:376px)and