常见的移动端H5页面开发遇到的坑和解决办法

常见的移动端H5页面开发遇到的坑和解决办法

手机常见问题 问题1：同样比例的图片在PC上看很清晰，在手机上看很模糊，这是什么原因？

经过研究，发现原来是这个问题。因为手机分辨率太小，如果网页文字按照分辨率显示的话，会很小。所以苹果在网页上只显示4的分辨率，所以=2;现在比较乱，有1.5/2/3等等。如果想让图片在手机上显示更清晰，必须用2x的背景图来代替img标签（一般都是用2倍）。比如一个div的宽高是，背景图必须也是，然后加上-size:;，这样显示的图片就更清晰了；代码如下：

background:url(../images/icon/all.png) no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;
display:inline-block;
width:100%;
height:50px;

问题二：无法在手机上放大和缩小网页

这是所有移动网站开发者都应该知道的，是在meta中设置的；有些移动网站有以下声明：

设置DTD的方式是写在XHTML中，如果页面使用了h5，则不需要设置DTD，直接声明

用于禁用页面缩放，通常将用户设置为 0 以禁用用户放大和缩小页面视图的能力。

为了更好的兼容性，我们使用完整的设置

问题 3：如何设置 Web 应用程序以全屏模式运行

apple--web-app-是设置网页应用是否以全屏模式运行；语法：

 //content设置为yesWeb应用会以全屏模式运行,反之则不会;content的默认值是no,表示正常显示,可以通过只读属性window.navigator.standalone来确定网页是否以全屏模式显示

问题四：如何开启或关闭页面自动识别电话号码

HTML5 提供了自动拨号的标签，在 a 标签的 href 后面加上 tel: 即可。

10010

- 您可以启用或禁用页面中电话号码的自动识别；语法：

 //默认情况下设备会自动识别任何可能是电话号码的字符串,设置telephone=no可以禁用这项功能,设置不识别邮箱和地址也同理

问题五：h5网站input设置type=的问题

设置h5网页的input类型一般会出现三个问题：

问题 1：属性不好用

解决了，我现在用的是js

问题2：表单提交时默认四舍五入

因为默认验证表单提交，所以默认的step是1，设置step属性，如果保留2位小数，写法如下：

 //input中type=number一般会自动生成一个上下箭头,点击上箭头默认增加一个step,点击下箭头默认会减少一个step;number中默认step是1,也就是step=0.01可以允许输入2位小数,并且点击上下箭头分别增加0.01和减少0.01;step和min一起使用时数值必须在min和max之间

问题3：部分安卓手机存在样式问题

从输入中删除这些默认样式：

input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{
-webkit-appearance: none;
margin: 0;
}

如何删除默认输入样式：

input,textarea {
border: 0;
-webkit-appearance: none; //可同时屏蔽输入框怪异的内阴影,解决iOS下无法修改按钮样式,测试还发现,加了此属性后,iOS下默认还是有圆角的,不过可以用border-radius属性修改
}

问题六：下拉选择设置问题

问题一：右对齐实现

设置以下属性

select option {
direction: rtl;
}

问题 2：引发扩展

Zepto 方法：

$(sltElement).trrgger("mousedown");

原生js方法：

function showDropdown(sltElement) {
var event;
event = document.createEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
sltElement.dispatchEvent(event);
};

问题 3：禁用默认箭头

::-ms-修改表单控件的下拉箭头，设置为隐藏并使用背景图片进行装饰

select::-ms-expand { display:none; }

问题 4：使用默认浏览器外观

input,select { -webkit-appearance:none; appearance: none; }

问题 7：移动设备上的点击事件延迟

在移动端，点击事件会有 300ms 的延迟，因为浏览器在等待你双击。然而这个延迟会导致用户体验很差。为了解决这个问题，我们的解决方案如下：

1.尽量使用触摸事件替代点击事件，例如使用事件（推荐）

2. 阻止点击标签a

3. 使用标签引入库来消除延迟。实验表明，这比 tap 更快。

4. Zepto的触摸模块和点击事件也可以解决点击的延迟问题

5. 延迟一定时间（300ms+）来处理事件（不推荐）

6.以上一般可以解决，如果不行就换用click事件吧。

7、触摸事件的响应顺序为-->-->-->点击。还可以通过绑定事件来加快事件的响应速度，解决300ms的延迟问题。

8.如果移动设备兼容性正常（IE//(iOS 9.3)及以上），只需添加以下meta标签设置为设备实际像素，就不会出现300ms延迟

点击事件的延迟会导致移动端透明问题

以下是一个示例：

事件测试
www.xxx.com

div 是绝对定位的 mask，并且它的 z-index 比 a 要高，我们将 tap 事件绑定到 div 上：

$('#haorooms').on('tap',function(){
$('#haorooms').hide();
});

当我们点击遮罩层的时候，div正常消失，但是当我们点击a标签上的遮罩层的时候，发现a链接被触发了，这就是所谓的点透事件。

原因：早于点击，即点击触发延迟了300ms左右，即tap触发后，遮罩隐藏，未触发点击，300ms后，遮罩消失，下方a链接触发点击；解决方法同上文点击事件延迟

问题 8：移动设备上的 HTML5 音频故障

由于网页自动播放音频或视频可能会给用户带来不便或造成不必要的流量消耗，苹果和安卓系统通常禁止自动播放和使用JS触发播放。播放必须由用户触发； 解决思路：先由用户触摸触发播放和暂停（让音频开始加载），稍后再用JS操作。 解决代码：

document.addEventListener('touchstart', function () {
document.getElementsByTagName('audio')[0].play();
document.getElementsByTagName('audio')[0].pause();
});

问题九：移动端样式兼容处理

如今的手机屏幕分辨率都不一样，为了让页面能够兼容各种手机，解决办法如下：

1.设置meta标签属性忽略设备实际分辨率，直接通过dpi重新设置物理尺寸与浏览器之间的分辨率，达到统一分辨率效果，禁止用户缩放

2.使用rem进行屏幕适配，设置根元素的font-size，然后在开发过程中将所有像素相关的布局都改为rem单位；使用媒体查询针对不同手机调整根元素的font-size

问题十：CSS动画页面闪白、动画卡顿、图片混乱

解决方案：

1. 尽量使用合成属性和 CSS3 动画设计，不要使用 left 和 top 进行定位

2.启用硬件加速

-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); //可以触发硬件加速,从而让浏览器在渲染动画时从CPU转向GPU

目前IE9+、Opera最新版本均支持硬件加速，当检测到DOM元素应用了某些CSS规则时会自动开启，解决页面闪烁问题，保证动画流畅。

3.各类应用（如微信）遇到图片量大时，img与-image会相互混淆，在6、6plus上情况更严重，目前临时解决办法是给所有使用图片的元素动态添加--:(0,0,0)。

4. 部分手机上页面滑动刷新可能会卡顿，解决办法如下：

a.关闭该属性（据说是因为开启监控滚动状态很耗性能，关闭这个属性滑动会顺畅很多）

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

b. 为元素添加CSS样式：--:(0,0,0);

问题十一：浮动子元素扩大父元素框的高度

解决方案如下：

1.父元素设置为：；

2.父元素设置为：-block;等等。

这里两种方法都是通过设置 CSS 属性，将浮动元素的父元素变为 BFC（块格式化上下文）元素，这样子元素高度就可以拉伸父元素；不过最好使用方法 1，因为块元素本身也会有一定的宽度和高度可以自行拉伸

BFC发生的条件：

1.html根元素

2. float 的值不为 none

3. 值为 -block/table-cell/table-

4. 价值是或固定

5.价值不

BFC约束规则：

1. 生成的 BFC 元素的子元素是依次放置的，它们的垂直方向的起点是包含块的顶部。两个相邻子元素之间的垂直距离取决于元素特性。在 BFC 中，相邻块级元素的边距会折叠。

2. 生成 BFC 的子元素的每个子元素的边距都与包含块的左边缘接触（对于从右到左的格式，右边距与右边缘接触），除非子元素还创建新的 BFC（例如，如果它本身就是一个浮动元素）

3.BFC区域不会与浮动元素区域重叠

4. 计算BFC高度时，浮动元素也计入计算

5.BFC是页面上隔离的独立容器，容器内部的子元素不会影响外部的元素，反之亦然

我们在写CSS时遇到的一些常见问题都可以从以上两点衍生出来，例如：

1、Block元素和父元素的宽度相同，所以Block元素是垂直排列的。

2. 一些Block元素会垂直重叠，但不会水平重叠。

3.浮动元素会尽量靠近左上角或者右上角。

4.设置父元素：或者浮动父元素，那么父元素会包含其浮动子元素。

BFC 有许多实际用途，例如防止相邻块的垂直重叠（塌陷）。

问题12：往返缓存问题

点击浏览器的有时候不会自动执行js，特别是在;这个和round-trip cache()有关系，解决办法是：

window.onunload = function(){};

问题 13：定位陷阱

1. 固定定位

固定元素在iOS中容易出现定位错误，当软键盘弹出时会影响固定元素的定位，但在iOS 4中不会出现这种情况。

解决方法：使用[]，如：

.....

2.定位

弹出软键盘弹出时影响元素定位；解决方法如下：

var ua = navigator.userAgent.indexOf('Android');
if(ua>-1){
$('.ipt').on('focus', function(){
$('.css').css({'visibility':'hidden'})
}).on('blur', function(){
$('.css').css({'visibility':'visible'})
})
}

3.安卓手机软键盘弹出，打开页面布局

BODY被抬起的解决办法：

$('body').height($('body')[0].clientHeight);

问题 14：音频和视频元素在 iOS 中播放，

问题 1：音频/视频写作

你的浏览器还不支持哦 //音频,写法一
 //音频,写法二

 //优先播放音乐bg.ogg,不支持在播放bg.mp3 

document.getElementById('music').play();

document.addEventListener("WeixinJSBridgeReady", function() {
document.getElementById('music').play();
}, false);

document.addEventListener('touchstart', function(){
audio.play();
}, false);

document.addEventListener("WeixinJSBridgeReady", function () {
shakeMusic.load();
}, false);

-webkit-touch-callout:none; //系统默认菜单被禁用;可以实现页面因为长按弹出各种操作窗口
-webkit-user-select:none; //webkit浏览器
-khtml-user-select:none; //早期浏览器
-moz-user-select:none; //火狐
-ms-user-select:none; //IE10
user-select:none;

input {
-webkit-user-select:auto; //webkit浏览器
}

body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}

-webkit-overflow-scrolling: touch;

a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-user-modify:read-write-plaintext-only; //-webkit-user-modify有个副作用,就是输入法不再能够输入多个字符
}
或
a,button,input,textarea{
-webkit-tap-highlight-color: rgba(0,0,0,0);
}

window.onpageshow = function(evt){
if(evt.persisted){
document.body.style.display ="none";
location.reload();
}
};

#Search::-webkit-search-cancel-button{
display: none;
}

-webkit-transform-style: preserve-3d; //设置内嵌的元素在 3D 空间如何呈现：保留3D
-webkit-backface-visibility:hidden; //设置进行转换的元素的背面在面对用户时是否可见：隐藏
-webkit-perspective: 1000;

 //input的三个属性autocomplete:默认为on,代表是否让浏览器自动记录输入的值,可以在input中加入autocomplete="off"来关闭记录,保密输入内容;autocapitalize:自动大小写;autocorrect:纠错

-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
text-size-adjust: 100%;

this.value = this.value.replace(/\u2006/g, '');

cursor: pointer;

var date =new Date("2016-05-31 00:00:00");

var date =new Date("2016/05/31");