手机移动端资源整合摘要.doc

meta基础知识 H5页面窗口自动调整到设备宽度，并禁止用户缩放页面 meta name=viewport content=width=device-width,initial-scale=1.0,minimum-scale=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-style content=black /!-- 可选default、black、black-translucent -- viewport模板viewport模板——通用 !DOCTYPE htmlhtmlheadmeta charset=utf-8meta content=width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no name=viewportmeta content=yes name=apple-mobile-web-app-capablemeta content=black name=apple-mobile-web-app-status-bar-stylemeta content=telephone=no name=format-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=black name=apple-mobile-web-app-status-bar-stylemeta content=telephone=no name=format-detectionmeta content=email=no name=format-detectiontitle标题/titlelink rel=stylesheet href=index.css/head body 这里开始内容/body /html 参考案例：/payact/readtemplate?t=mobile/2015/wxzfsht/index_tmpl 常见问题 移动端如何定义字体font-family中文字体使用系统默认即可，英文用Helvetica /* 移动端定义字体的代码 */ body{font-family:Helvetica;} 参考《移动端使用字体的思考》 移动端字体单位font-size选择px还是rem对于只需要适配少部分手机设备，且分辨率对页面影响不大的，使用px即可 对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备 rem配置参考： html{font-size:10px}@media screen and (min-width:321px) and (max-width:375px){html{font-size:11px}}@media screen and (min-width:376px) and (max-width:414px){html{font-size:12px}}@media screen and (min-width:415px) and (max-width: