当前位置：首页 > 微信 > 正文

移动端微信页面兼容性问题集合

刚刚才把博客搬到这里来，记录一下完成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">
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‘
);
    }
         
}

 

上一篇
通过新浪云部署Node.js微信小程序商城（不用买域名、不用备案、不用配置https）

下一篇
微信小程序，地址助手

相关文章

最新文章