今天上午发了一篇文章是关于微信h5支付的，也说了楼主最近在做移动端，之前也做过移动端的一些单页面，这次就整理一下笔记以及遇到的问题，欢迎交流。
1.html部分
- 移动端需要禁止用户缩放，否则体验非常差劲，话不多说，上头部代码。(来源百度)
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
<!-- 是否启动webapp功能，会删除默认的苹果工具栏和菜单栏。 -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 这个主要是根据实际的页面设计的主体色为搭配来进行设置。 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<!-- 忽略页面中的数字识别为电话号码,email识别 -->
<meta name="format-detection"content="telephone=no, email=no" />
<!-- 启用360浏览器的极速模式(webkit) -->
<meta name="renderer" content="webkit">
<!-- 避免IE使用兼容模式 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">
2.css部分
- 初始化样式，这个就不多说了，上代码。
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button,
input, textarea, th, td {
margin: 0;
padding: 0;
}
body, button, input, select, textarea {
font: 12px/1.5 tahoma, arial, \5b8b\4f53;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
}
address, cite, dfn, em, var {
font-style: normal;
}
code, kbd, pre, samp {
font-family: couriernew, courier, monospace;
}
small {
font-size: 12px;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
-webkit-user-select: none;
-moz-user-focus: none;
-moz-user-select: none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
a:hover {
text-decoration: none;
outline:none;
background: none;
text-decoration: none;
-webkit-tap-highlight-color:rgba(0,0,0,0);
}
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
legend {
color: #000;
}
fieldset, img {
border: 0;
}
button, input, select, textarea {
font-size: 100%;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
input{
margin: 0;
padding: 0;
border: 1px solid transparent; //自定义边框
outline: none; //消除默认点击蓝色边框效果
}
3.关键部分 rem.js
- 关于rem，网上也是一堆说法，楼主之前也看过一些网上的，写的比较乱。下面附上楼主的代码。
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=750){
// 这里的数字 取决于设计稿的宽度 直接把这个750改成你设计稿的宽度,布局时候1rem=100px，下面那个750不要动
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
recalc();
})(document, window);
说一下遇到的问题
-
由于使用rem布局 ，楼主转化下来设计稿中有的字体比如是14px；转化为rem就是0.14rem;但谷歌浏览器默认最小字体12px，也就是0.24rem；所以 小于0.24rem的字体实际都会显示成12px；这时候可以和设计师沟通，或者自己看着放大一点，其他布局正常来就行,1rem=100px;
-
body背景图兼容;之前做body背景图时候在安卓下不兼容，不是自适应，搞了半天，原来是没让html，body百分百。
html, body {
width: 100%;
height: 100%;
}
body {
background: url("/static/web/image/zhuce_beijing.png") no-repeat center center/100% 100%;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
width: 100%;
}
- 还有需要注意的就是一些input的默认样式 ，以及button的默认样式，还有a标签点击去除高亮等。js在移动端下还没遇到过比较大的问题。
结尾
- 如果还有什么移动端需要注意的问题，欢迎评论补充。
