移动端微信页面兼容性问题集合
刚刚才把博客搬到这里来，记录一下完成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);
浙公网安备 33010602011771号
