由于智能手机的广泛使用，现在基本上不是很差的web项目都会同时配有相应的移动端，下面是我们整理的关于移动端web开发的一些常用技巧，以供大家参考和查阅。 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" /> 4. 设置状态栏的背景颜色（IOS） 设置状态栏的背景颜色，只有在 "apple-mobile-web-app-capable" content="yes" 时生效 <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> default ：状态栏背景是白色。 black ：状态栏背景是黑色。 black-translucent ：状态栏背景是半透明。 如果设置为 default 或 black ,网页内容从状态栏底部开始。 如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。 5. 移动端手机号码识别（IOS） 在 iOS Safari （其他浏览器和Android均不会）上会对那些看起来像是电话号码的数字处理为电话链接，比如： 7位数字，形如：1234567 带括号及加号的数字，形如：(+86)123456789 双连接线的数字，形如：00-00-00111 11位数字，形如：13800138000 可能还有其他类型的数字也会被识别。我们可以通过如下的meta来关闭电话号码的自动识别： <meta name="format-detection" content="telephone=no" /> 6. 开启短信功能 <a href="sms:123456">123456</a> 7. 移动端字体单位font-size选择px还是rem 对于只需要适配手机设备，使用px即可 对于需要适配各种移动设备，使用rem，例如只需要适配iPhone和iPad等分辨率差别比较挺大的设备 rem配置参考： html {font-size:10px} @media screen and (min-width:480px) and (max-width:639px) { html { font-size: 15px } } @media screen and (min-width:640px) and (max-width:719px) { html { font-size: 20px } } @media screen and (min-width:720px) and (max-width:749px) { html { font-size: 22.5px } } @media screen and (min-width:750px) and (max-width:799px) { html { font-size: 23.5px } } @media screen and (min-width:800px) and (max-width:959px) { html { font-size: 25px } } @media screen and (min-width:960px) and (max-width:1079px) { html { font-size: 30px } } @media screen and (min-width:1080px) { html { font-size: 32px } } 8. ios系统中元素被触摸时产生的半透明灰色遮罩怎么去掉 ios用户点击一个链接，会出现一个半透明灰色遮罩, 如果想要禁用，可设置-webkit-tap-highlight-color的alpha值为0，也就是属性值的最后一位设置为0就可以去除半透明灰色遮罩 a,button,input,textarea{-webkit-tap-highlight-color: rgba(0,0,0,0)} 9. 部分android系统中元素被点击时产生的边框怎么去掉 android用户点击一个链接，会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样，可设置-webkit-tap-highlight-color的alpha值为0去除部分机器自带的效果 a,button,input,textarea{ -webkit-tap-highlight-color: rgba(0,0,0,0) -webkit-user-modify:read-write-plaintext-only; } -webkit-user-modify有个副作用，就是输入法不再能够输入多个字符 另外，有些机型去除不了，如小米2 对于按钮类还有个办法，不使用a或者input标签，直接用div标签 10. 禁止文本缩放 当移动设备横竖屏切换时，文本的大小会重新计算，进行相应的缩放，当我们不需要这种情况时，可以选择禁止： html { -webkit-text-size-adjust: 100%; } 需要注意的是，PC端的该属性已经被移除，该属性在移动端要生效，必须设置 “meta viewport”。 11. 移动端如何清除输入框内阴影 在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭： input, textarea { border: 0; /* 方法1 */ -webkit-appearance: none; /* 方法2 */ } 12. 移动端禁止选中内容 如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉： .user-select-none { -webkit-user-select: none; /* Chrome all / Safari all */ -moz-user-select: none; /* Firefox all （移动端不需要） */ -ms-user-select: none; /* IE 10+ */ } 13. 移动端取消touch高亮效果 在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来进行全局的禁止： html { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } 但这个方法在三星的机子上无效，有一种妥协的方法是把页面非真实跳转链接的a标签换成其它标签，可以解决这个问题。 14. 手机拍照和上传图片 <input type="file">的accept 属性 <!-- 选择照片 --> <input type=file accept="image/*"> <!-- 选择视频 --> <input type=file accept="video/*">
文章来源 CODETC，欢迎分享，转载请注明地址：
http://www.codetc.com/article-271-1.html
|