问题⼀:⽤同等⽐例的图⽚在PC机上很清楚，但是⼿机上很模糊，原因是什么呢?
经研究发现是devicePixelRatio作怪，因为⼿机分辨率太⼩，如果按照分辨率来显⽰⽹页字会⾮常⼩，所以苹果就把iPhone 4的960640分辨率
在⽹页⾥只显⽰了480320，这样devicePixelRatio＝2；现在android⽐较乱，有1.5/2/3等，想让图⽚在⼿机⾥显⽰更为清晰必须使⽤2x的背
景图来代替img标签(⼀般情况都是⽤2倍)，例如⼀个div的宽⾼是100100，背景图必须得200200，然后background-size:contain;，这样显⽰
出来的图⽚就⽐较清晰了；代码如下:
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中的viewport；有些⼿机站有如下声明: <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "/DTD/xhtml-mobile10.dtd">
设置DTD的⽅式是XHTML的写法，假如页⾯运⽤的是h5可以不⽤设置DTD，直接声明
使⽤viewport使页⾯禁⽌缩放，通常把user-scalable设置为0来关闭⽤户对页⾯视图缩放的⾏为
<meta name="viewport" content="user-scalable=0" />
为了更好的兼容，我们使⽤完整的viewport设置
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
问题三：如何设置Web应⽤以全屏模式运⾏
apple-mobile-web-app-capable是设置Web应⽤是否以全屏模式运⾏；语法:
<meta name="apple-mobile-web-app-capable" content="yes"> //content设置为yesWeb应⽤会以全屏模式运⾏，反之则不会;content的默认值是no，表⽰正常显⽰，可以问题四：如何启动或禁⽤⾃动识别页⾯中的电话号码 html5提供了⾃动调⽤拨号的标签，只要在a标签的href中添加tel：就可以了
<a href="tel:10010">10010</a>
format-detection可以启动或禁⽤⾃动识别页⾯中的电话号码；语法:
<meta name="format-detection" content="telephone=no"> //默认情况下设备会⾃动识别任何可能是电话号码的字符串，设置telephone=no可以禁⽤这项功能，设置不识问题五:h5⽹站input设置为type=number的问题
h5⽹页input的type设置为number⼀般会产⽣三个问题:
问题1:maxlength属性不好⽤
解决，我⽬前⽤的是js
<input type="number" oninput="checkTextLength(this ,10)">
<script type="text/javascript">
医院用筋膜仪function checkTextLength(obj, length) {
if(obj.value.length > length) {
obj.value = obj.value.substr(0, length);
}
}
</script>
问题2:form提交的时候默认取整
因为form提交默认做了表单验证,step默认是1，要设置step属性，假如保留2位⼩数，写法如下:
<input type="number" step="0.01" /> //input中type=number⼀般会⾃动⽣成⼀个上下箭头，点击上箭头默认增加⼀个step，点击下箭头默认会减少⼀个step;number中默问题3：部分安卓⼿机出现样式问题
去除input中这些默认样式:
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默认样式的⽅法:
input,textarea {
border: 0;
-webkit-appearance: none; //可同时屏蔽输⼊框怪异的内阴影，解决iOS下⽆法修改按钮样式，测试还发现，加了此属性后,iOS下默认还是有圆⾓的，不过可以⽤border-radi }
问题六:select下拉选择设置问题
问题1：右对齐实现
设置如下属性
select option {
direction: rtl;
}
问题2：唤起select的option展开
zepto⽅式:
$(sltElement).trrgger("mousedown");
原⽣js⽅式:
function showDropdown(sltElement) {
var event;
event = ateEvent('MouseEvents');
event.initMouseEvent('mousedown', true, true, window);
sltElement.dispatchEvent(event);
};
问题3：禁⽤select默认箭头
:
:-ms-expand修改表单控件下拉箭头，设置隐藏并使⽤背景图⽚来修饰
select::-ms-expand { display:none; }
问题4：使⽤appearance改变webkit浏览器的默认外观
input,select { -webkit-appearance:none; appearance: none; }
移动端的点击事件都会有300ms延迟，是因为浏览器在等待你是否执⾏双击，但此延迟导致⽤户体验不好，解决这个问题，我们的⽅案如下：
栏木机
1.尽量都使⽤touch事件来替换click事件，例如⽤touchend事件(推荐)
2.⽤preventDefault阻⽌a标签的click
3.⽤script标签引⼊fastclick库去除延迟，实验证明fastclick⽐tap要快
5.延迟⼀定的时间(300ms+)来处理事件(不推荐)
6.以上⼀般都能解决，实在不⾏就换成click事件
7.触摸事件的响应顺序为touchstart-->touchmove-->touchend-->click，也可以通过绑定ontouchstart事件，加快对事件的响应，解决
300ms延迟问题
折叠音箱8.若移动设备兼容性正常的话(IE/Firefox/Safari(IOS 9.3)及以上)只需加上下⾯meta标签即可把viewport设置成设备的实际像素，就不会有300ms的延迟
<meta name="viewport" content="width=device-width">
click事件的延迟会导致移动端点透问题
案例如下:
<div id="haorooms">事件测试</div>
<a href="#"&</a>
div是绝对定位的蒙层且z-index⾼于a，我们给div绑定tap事件：
$('#haorooms').on('tap',function(){
$('#haorooms').hide();
});
我们点击蒙层时div正常消失，但是当我们在a标签上点击蒙层时，发现a链接被触发，这就是所谓的点透事件
原因:touchstart早于touchend早于click，即click的触发是有300ms左右延迟的，也就是说tap触发之后蒙层隐藏click没有触发,300ms之后由于蒙层消失click触发到了下⾯的a链接上；解决⽅案同上⾯的click事件延迟
问题⼋：移动端HTML5 audio autoplay失效问题
由于⾃动播放⽹页中的⾳频或视频会给⽤户带来困扰或不必要的流量消耗，所以苹果系统和安卓系统通常都会禁⽌⾃动播放和使⽤JS的触发播放，必须由⽤户来触发才播放；解决⽅法思路：先通过⽤户touchstart触碰触发播放并暂停(让⾳频开始加载)，后⾯⽤JS再操作就没问题了；解决代码:
document.addEventListener('touchstart', function () {
});
问题九：移动端样式兼容处理
当今的⼿机端，屏幕分辨率各有不同，为了让页⾯可以兼容各款⼿机，解决⽅案如下:
1.设置meta标签viewport属性，使其⽆视设备的真实分辨率，直接通过dpi在物理尺⼨和浏览器之间重设分辨率，从⽽达到能有统⼀的分辨率的效果，并且禁⽌掉⽤户缩放
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
2.使⽤rem进⾏屏幕适配，设置好root元素的font-size⼤⼩，然后在开发的时候所有与像素有关的布局统⼀换成rem单位；针对不同的⼿机使⽤媒体查询对root元素font-size进⾏调整
问题⼗:CSS动画页⾯闪⽩，动画卡顿，图⽚错乱的问题
工业机柜空调
解决⽅法:
1.尽可能地使⽤合成属性transform和opacity来设计CSS3动画，不使⽤position的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
⽬前像Chrome/Filefox/Safari/IE9+以及最新版本Opera都⽀持硬件加速，当检测到某个DOM元素应⽤了某些CSS规则时就会⾃动开启，从⽽解决页⾯闪⽩，保证动画流畅
3.各种应⽤的webview(例如)在遇到有⼤量图⽚时会出现img和background-image互相错乱的情况,6和6plus更为严重,⽬前暂时的解决⽅法也是动态给所有⽤到图⽚的元素加上-webkit-transform:translate3d(0,0,0)
4.页⾯中的滑动刷新在某些⼿机中出现卡顿滑不动的情况，以下给出可⾏的解决⽅案:
a.关闭probeType属性(传说是因为这个启⽤监听滚动状态的很耗性能，关闭这个属性滑动就会流畅很多)
document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
b.给scroll元素增加css样式:-webkit-transform:translate3d(0,0,0);洗手液机
问题⼗⼀：浮动⼦元素撑开⽗元素盒⼦⾼度
解决⽅法如下：
1.⽗元素设置为 overflow: hidden;氨基酸水解
豫公网安备41160202000603
站长QQ:729038198
关于我们
投诉建议