移动端微信页面兼容性问题集合
刚刚才把博客搬到这里来,记录一下完成2个微信公众号项目的经验吧
1.做移动端的项目页面必须用html5的标签和知识,不然有些坑就不好解决了。
2.H5页面窗口自动调整到设备宽度,并禁止用户缩放页面(强制让文档的宽度与设备宽度保持1:1,最大宽度1.0,禁止屏幕放。)
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=0, user-scalable=no" />
3.忽略将页面中的数字识别为电话号码
(禁止数字自动识别为电话号码,这个比较有用,因为一串数字在iphone上会显示成蓝色,样式加成别的颜色也是不生效的。)
<meta name="apple-mobile-web-app-capable" content="yes" />
4.忽略Android平台中对邮箱地址的识别
<meta name="format-detection" content="telephone=no">
* 移动端头部设置
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="format-detection" content="telephone=no"> <meta name="format-detection" content="email=no"> <title></title> </head>
* 禁止用户长按选中文字
html,body{ -webkit-user-select:none; user-select:none; }
5.响应式布局啊,在css样式里用 Media Query(媒介查询)通过不同的媒介类型和条件定义样式表规则。
.remote{ position:absolute; top:-66%; left:34.5%; } @media only screen and (min-device-width : 320px) and (max-device-width : 568px) { .remote{ left:32%; } } @media only screen and (min-device-width : 375px) and (max-device-width : 667px) { .remote{ left:34.5%; } } @media only screen and (min-device-width : 414px) and (max-device-width : 736px) { .remote{ left:35.4%; } }
6.webkit表单元素的默认外观怎么重置
.css{-webkit-appearance:none;} (ios上的下拉框会有圆角,所以要写border-radius:0)
7.禁用 radio 和 checkbox 默认样式
input[type="radio"]::-ms-check,input[type="checkbox"]::-ms-check{ display: none; }
8.webkit表单输入框placeholder的颜色值
input::-webkit-input-placeholder{color:#999;} input:focus::-webkit-input-placeholder{color:#999;}
9.手机选择相片调用本地相册
<input type="file" class="image_upload" accept="image/*" capture="camera" multiple="multiple"/>
但是会有一个问题存在,在Iphone7中无法读取本地相册:
方法一:去掉capture属性,但是如果去掉,Andriod手机将无法调用相机拍照。
方法二:先判断机型,然后如果是Andriod手机添加属性capture。如果是ios就去掉属性。
function getPhoneType(){ //正则,忽略大小写 var pattern_phone = new RegExp("iphone","i"); var pattern_android = new RegExp("Android","i"); var userAgent = navigator.userAgent.toLowerCase(); var isAndroid = pattern_android.test(userAgent); var isIphone = pattern_phone.test(userAgent); if(isAndroid){ //capture="camera" $('.image_grid input[type="file"]').attr('capture','camera'); }else if(isIphone){ $('.image_grid input[type="file"]').removeAttr('capture'); } }
10.iphone手机上点击事件不起作用
绑定的点击事件在iphone上不起效果,安卓上都没问题,事件能正确触发,遇到这个问题,整个人都会崩溃的。
开始觉得是写法问题,后来发现,是由于iPhone上,点击的对象,必须加上一个样式,拥有cursor:pointer这个样式,就没问题了。
兼容性的问题。
11.基于rem移动端自适应解决方案
(function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; //如果页面的宽度超过了640px,那么页面中html的font-size恒为100px, //否则页面中html的font-size的大小为:100*(当前页面宽度/640) if(clientWidth>=640){ docEl.style.fontSize = '100px'; }else{ //此时1rem=100px docEl.style.fontSize = 100 * (clientWidth / 640) + 'px'; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· PPT革命!DeepSeek+Kimi=N小时工作5分钟完成?
· What?废柴, 还在本地部署DeepSeek吗?Are you kidding?
· 赶AI大潮:在VSCode中使用DeepSeek及近百种模型的极简方法
· DeepSeek企业级部署实战指南:从服务器选型到Dify私有化落地
2018-03-11 05 this 在不同环境下的指向 和正则
2018-03-11 04学习 JS 作用域 继承 闭包