移动端项目开发小结
原文地址：https://caochangkui.github.io/mobile/
最近开发移动端项目，发现，与PC端项目开发遇到的浏览器兼容性问题相比，移动端还有更多的坑的。这里将遇到一些问题，做出总结。
页面自适应
各种手机型号，尺寸大小不一，有的屏幕320px宽，有的屏幕414px宽。。如果尺寸写固定单位px，那么很多元素会变形，就要用媒体查询@media针对不同的屏幕宽度进行调整，太麻烦。所以，推荐在页面中使用rem作为尺寸单位，引入如下代码即可：
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
callback = function () {
var clientWidth = docEl.clientWidth;
clientWidth = clientWidth < 640 ? clientWidth : 640;
docEl.style.fontSize = clientWidth / 6.4 + 'px';
};
if (!doc.addEventListener) return;
callback(); // 防止页面加载时的抖动
win.addEventListener(resizeEvt, callback, false);
doc.addEventListener('DOMContentLoaded', callback, false);
})(document, window);
如果在640px像素的屏幕下开发，需要为某字体设置16px大小时，只需要设置为0.16rem即可；
如果在320px像素的屏幕下开发，需要为某字体设置16px大小时，只需要设置为0.32rem即可；
优化alert弹窗
移动端有些错误需要提示时，使用默认alert函数的效果很不友好。网上很多比较友好的插件可用，但是为了不使项目太大，这里手动封装了一个：
其中element为存放弹出内容的外围div,test为弹出内容，position为弹出框在页面中的位置。
function showToast(element, test, position) {
element.html('<p class="error-content">' + test + '</p>');
element.stop(true, true).animate({
bottom: position,
opacity: '1'
}, 400).animate({
opacity: '1'
}, 1000).animate({
bottom: '-2rem'
}, 0);
}
使用方法，只需创建如下元素用力存放提示内容，并且设置其定位样式：
<div id="error-alert">
<p class="error-content"></p>
</div>
#error-alert {
position: fixed;
opacity: 1;
bottom: -2rem;
left: 50%;
right: 0;
width: 6rem;
height: 1rem;
line-height: 1rem;
margin-left: -3rem;
background: #fff;
border-radius: 0.5rem;
z-index: 999;
}
#error-alert.show-error {
top: 0;
}
#error-alert .error-content {
color: #333;
font-size: 0.4rem;
line-height: 1rem;
text-align: center;
}
华为自带浏览器不支持 es6
真机测试时，发现在华为手机自带浏览器中，某些点击事件失效，经逐行排查，发现是 es6 的问题，所以：
经过此网站 http://ruanyf.github.io/es-checker/index.cn.html 检测后，得出手机端不同浏览器对es6的支持：
- 华为浏览器 11%
- UC浏览器 88%
- QQ浏览器 88%
- 微信内置浏览器 90%
- 钉钉内置浏览器 26%
当然，最新的华为浏览器可能已经解决了此问题，但是为了兼容低版本，建议：
fixed 定位缺陷
IOS下对元素fixed定位时，若软键盘弹出时，会影响其定位效果，android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位 。
解决方案：可用iScroll插件或者better-scroll插件解决这个问题
防止图片点击放大预览
- 只需对不需要进行预览的图片加样式
img {
pointer-events: none;
}
- 图片用背景图的方式插入
div {
background: url(a.png) no repeat center;
}
- 在img元素上添加 onclick="return false", 如下：
<img src="***" onclick="return false" />
- js事件阻止默认行为的方法 ----- 有坑！
img.addEventListener('click',function(e){
e.preventDefault();
});
注意：上面的 click 事件在移动端中也可使用 touchend 事件，但是不可使用 touchstart 或 touchmove 事件。
因为，使用 touchstart 或 touchmove 事件后，当页面中上部分有个大图时，当需要滚动页面往下时，是无法滚动的，因为出发了这两个事件。
强制修改input中placeholder字体颜色
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #292929;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #292929;
}
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #292929;
}
z-index 在IOS中的缺陷
在IOS系统中，z-index为负数时会失效，所以还是避免负数吧，正数想多大就多大。。。
iPhoneX 太长
因为 iPhoneX 尺寸太长，导致有些元素在垂向位置不协调，这里只能使用@media媒体查询了：
@media all and (max-width: 375px) and (min-height: 750px) {
.XXX {
bottom: 4rem;
}
}
margin-bottom 在苹果手机上无效
当底部有固定导航栏或固定按钮时，主页面会使用margin-bottom或者padding-bottom ， 但是这么做在苹果手机上无法生效，会导致页面无法滑动到底部。
解决办法：在 body 下面添加一个空的 div
<div class="margin-bottom-100"></div>
div.margin-bottom-100 {
height: 100px;
}
1px 像素边框的问题
css初始样式重置
@charset "utf-8";html{background-color:#fff;color:#000;font-size:12px}
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,figure,form,fieldset,legend,input,textarea,button,p,blockquote,th,td,pre,xmp{margin:0;padding:0}
body,input,textarea,button,select,pre,xmp,tt,code,kbd,samp{line-height:1.5;font-family:tahoma,arial,"Hiragino Sans GB",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,small,big,input,textarea,button,select{font-size:100%}
h1,h2,h3,h4,h5,h6{font-family:tahoma,arial,"Hiragino Sans GB","微软雅黑",simsun,sans-serif}
h1,h2,h3,h4,h5,h6,b,strong{font-weight:normal}
address,cite,dfn,em,i,optgroup,var{font-style:normal}
table{border-collapse:collapse;border-spacing:0;text-align:left}
caption,th{text-align:inherit}
ul,ol,menu{list-style:none}
fieldset,img{border:0}
img,object,input,textarea,button,select{vertical-align:middle}
article,aside,footer,header,section,nav,figure,figcaption,hgroup,details,menu{display:block}
audio,canvas,video{display:inline-block;*display:inline;*zoom:1}
blockquote:before,blockquote:after,q:before,q:after{content:"\0020"}
textarea{overflow:auto;resize:vertical}
input,textarea,button,select,a{outline:0 none;border: none;}
button::-moz-focus-inner,input::-moz-focus-inner{padding:0;border:0}
mark{background-color:transparent}
a,ins,s,u,del{text-decoration:none}
sup,sub{vertical-align:baseline}
html {overflow-x: hidden;height: 100%;font-size: 50px;-webkit-tap-highlight-color: transparent;}
body {font-family: Arial, "Microsoft Yahei", "Helvetica Neue", Helvetica, sans-serif;color: #333;font-size: .28em;line-height: 1;-webkit-text-size-adjust: none;}
hr {height: .02rem;margin: .1rem 0;border: medium none;border-top: .02rem solid #cacaca;}
a {color: #25a4bb;text-decoration: none;}
