移动端页面开发
一、meta标签相关知识
1、移动端页面设置视口宽度等于设备宽度，并禁止缩放
2、移动端页面设置视口宽度等于定宽（如640px），并禁止缩放，常用于微信浏览器页面。
3、禁止将页面中的数字识别为电话号码
4、忽略Android平台中对邮箱地址的识别
5、是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏
6、启用360浏览器的极速模式(webkit)
7、设置苹果工具栏颜色
viewport模板
charset="utf-8">
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
content="yes" name="apple-mobile-web-app-capable">
content="black" name="apple-mobile-web-app-status-bar-style">
content="telephone=no" name="format-detection">
content="email=no" name="format-detection">
</span><span class="pln" style="color:rgb(0,0,0);">title</span><span class="tag" style="color:rgb(0,0,136);">
rel="stylesheet" href="index.css">
content...
二、CSS样式技巧
1、禁止ios和android用户选中文字
.css{-webkit-user-select:none}2、禁止ios长按时触发系统的菜单，禁止ios&android长按时下载图片
.css{-webkit-touch-callout: none}3、webkit去除表单元素的默认样式
.css{-webkit-appearance:none;}4、修改webkit表单输入框placeholder的样式
input::-webkit-input-placeholder{color:#AAAAAA;}
input:focus::-webkit-input-placeholder{color:#EEEEEE;} 5、去除android a/button/input标签被点击时产生的边框 & 去除ios a标签被点击时产生的半透明灰色背景
a,button,input{-webkit-tap-highlight-color:rgba(255,0,0,0);} 6、ios使用-webkit-text-size-adjust禁止调整字体大小
body{-webkit-text-size-adjust: 100%!important;}7、android 上去掉语音输入按钮
input::-webkit-input-speech-button {display: none}8、移动端定义字体，移动端没有微软雅黑字体
/* 移动端定义字体的代码 */
body{font-family:Helvetica;}9、手机拍照和上传图片
type=file accept="image/*">
type=file accept="video/*"> 10、取消input在ios下，输入的时候英文首字母的默认大写
autocapitalize="off" autocorrect="off" /> 11、打电话和发短信
href="tel:0755-10086">打电话给:0755-10086
href="sms:10086">发短信给: 10086
我觉得转换的方式可以用下面步骤。
（1）. 设计稿应有约定的大小（例750px），选取一个手机的设备宽度做量取大小值（例375）。
（2）. 限制使用rem，选取一个font-size值作为的基数。
（3）. 计算每个元素的rem值，进行界面开发。
（4）. js计算当前设备宽度的fontSize，并设置回html元素上。（适配步骤）
（5）. 媒体查询作为补救措施，特殊设备宽度设置特殊的font-size。（这步不是必须的）
注意
（1）. px可以用，但是当心效果会偏大或偏小，元素可能还会往下掉。
（2）. 界面开发时只针对iPhone6（375pt）一种机型，页面完成后，才做适配步骤。
（3）. 设计师可能会输出标注图（750px）和@3x切图（1125px）两种图。用@3x切图的设计稿切图，在超清屏幕才能清晰；标注图可用来计算元素长宽；但是设计师可能为了简单，就只输出一种视觉图，就如文章开头说的750px、1080px。
设计稿转换页面单位尺寸，简单做就是——先针对某个机型做，再做适配。只需在页面引入这段原生js代码就可以了
(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){
docEl.style.fontSize =
'100px'
;
}
else
{
docEl.style.fontSize = 100 * (clientWidth / 750) +
'px'
;
}
};
if
(!doc.addEventListener)
return
;
win.addEventListener(resizeEvt, recalc,
false
);
doc.addEventListener(
'DOMContentLoaded'
, recalc,
false
);
})(document, window);
如何使用？
这是rem布局的核心代码，这段代码的大意是：
如果页面的宽度超过了750px，那么页面中html的font-size恒为100px，否则，页面中html的font-size的大小为： 100 * (当前页面宽度 / 750)
为什么是750px？
设计图一般是750px的，这样相当于100px = 1rem，可以方便计算；
因为是750px所以应限制下页面的大小，所以最外层的盒子应该是：
|
1
2
3
4
5
|
position: relative;
width: 100%;
max-width: 640px;
min-width: 320px;
margin: 0 auto;
|