移动开发常见问题.docx

移动端web开发常见问题Meta相关1. 添加到主屏后的标题（IOS）meta name=apple-mobile-web-app-title content=标题 2. 启用 WebApp 全屏模式（IOS）当网站添加到主屏幕后再点击进行启动时，可隐藏地址栏（从浏览器跳转或输入链接进入并没有此效果）meta name=apple-mobile-web-app-capable content=yes / meta name=apple-touch-fullscreen content=yes / 3. 百度禁止转码通过百度手机打开网页时，百度可能会对你的网页进行转码，往你页面贴上它的广告，非常之恶心。不过我们可以通过这个meta标签来禁止它：meta http-equiv=Cache-Control content=no-siteapp /百度SiteApp转码声明：/R28wSBl4. 设置状态栏的背景颜色（IOS）设置状态栏的背景颜色，只有在apple-mobile-web-app-capable content=yes时生效meta name=apple-mobile-web-app-status-bar-style content=black-translucent / content 参数：default ：状态栏背景是白色。black ：状态栏背景是黑色。black-translucent ：状态栏背景是半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。5.移动端手机号码识别（IOS）在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如：7位数字，形如：1234567带括号及加号的数字，形如：(+86)123456789双连接线的数字，形如：00-00-0011111位数字，形如能还有其他类型的数字也会被识别。我们可以通过如下的meta来关闭电话号码的自动识别：meta name=format-detection content=telephone=no /开启电话功能a href=tel:123456123456/a开启短信功能：a href=sms:123456123456/a 6. 移动端邮箱识别（Android）与电话号码的识别一样，在安卓上会对符合邮箱格式的字符串进行识别，我们可以通过如下的meta来管别邮箱的自动识别：meta content=email=no name=format-detection / 同样地，我们也可以通过标签属性来开启长按邮箱地址弹出邮件发送的功能：a mailto:dooyoe@dooyoe@/a 7. 添加智能 App 广告条 Smart App Banner（IOS 6+ Safari）meta name=apple-itunes-app content=app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL8. IOS Web app启动动画由于iPad 的启动画面是不包括状态栏区域的。所以启动图片需要减去状态栏区域所对应的方向上的20px大小，相应地在retina设备上要减去40px的大小。link href=apple-touch-startup-image-320x460.png media=(device-width: 320px) rel=apple-touch-startup-imagelink href=apple-touch-startup-image-640x960.png media=(device-width: 320px) and (-webkit-device-pixel-ratio: 2) rel=apple-touch-startup-imagelink href=apple-touch-startup-image-768x1004.png media=(device-width: 768px) and (orientation: portrait) rel=apple-touch-startup-imagelink href=apple-touch-startup-image-748x1024.png media=(device-width: 768px) and (orientation: landscape) rel=apple-touch-startup-imagelink href=apple-touch-startup-image-