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

时间：2017-07-18 16:48:13 阅读：348 评论：0 收藏：0 [点我收藏+]

标签：get 忽略 capture 蓝色 position new radio oid roi

刚刚才把博客搬到这里来，记录一下完成2个微信公众号项目的经验吧

1.做移动端的项目页面必须用html5的标签和知识，不然有些坑就不好解决了。

2.H5页面窗口自动调整到设备宽度，并禁止用户缩放页面（强制让文档的宽度与设备宽度保持1:1，最大宽度1.0，禁止屏幕缩放。）

3.忽略将页面中的数字识别为电话号码

（禁止数字自动识别为电话号码，这个比较有用，因为一串数字在iphone上会显示成蓝色，样式加成别的颜色也是不生效的。）

4.忽略Android平台中对邮箱地址的识别

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.手机选择相片调用本地相册

但是会有一个问题存在，在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‘);

}

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

标签：get 忽略 capture 蓝色 position new radio oid roi

原文地址：http://www.cnblogs.com/wanf/p/7200946.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行