在PC Web上那一套在多数情况下并不适用于手机Web，对于手机网站建设，总结了如下几点注意：
一、meta 的使用
首先我们来看看webkit内核中的一些私有的meta标签，这些meta标签在开发webapp时起到非常重要的作用。
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">
第一个meta标签表示：强制让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览，viewport：能优化移动浏览器的显示。
第二个meta标签是iphone设备中的safari私有meta标签，它表示：允许全屏模式浏览；
第三个meta标签也是iphone的私有标签，它指定的iphone中safari顶端的状态条的样式；
第四个meta标签表示：告诉设备忽略将页面中的数字识别为电话号码。
winphone系统a、input标签被点击时产生的半透明灰色背景怎么去掉
<meta name="msapplication-tap-highlight" content="no">
二、HTML5标签的使用
在开始编写webapp时，建议前端工程师使用HTML5，而放弃HTML4，因为HTML5可以实现一些HTML4中无法实现的丰富的WEB应用程序的体验，可以减少开发者很多的工作量，当然了你决定使用HTML5前，一定要对此非常熟悉，要知道HTML5的新标签的作用。比如定义一块内容或文章区域可使用section标签，定义导航条或选项卡可以直接使用nav标签等等。
1、html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。
<a href="tel:4008106999,1034">400-810-6999 转 1034</a>
2、拨打手机直接如下
<a href="tel:15677776767">点击拨打15677776767</a>
3、html5GPS定位功能
具体请看：http://www.haorooms.com/post/html5_GPS_getCurrentPosition
三、针对适配等比缩放的方法:
@media only screen and (min-width: 1024px){
body{zoom:3.2;}
}
@media only screen and (min-width: 768px) and (max-width: 1023px) {
body{zoom:2.4;}
}
@media only screen and (min-width: 640px) and (max-width: 767px) {
body{zoom:2;}
}
@media only screen and (min-width: 540px) and (max-width: 639px) {
body{zoom:1.68;}
}
@media only screen and (min-width: 480px) and (max-width: 539px) {
body{zoom:1.5;}
}
@media only screen and (min-width: 414px) and (max-width: 479px) {
body{zoom:1.29;}
}
@media only screen and (min-width: 400px) and (max-width: 413px) {
body{zoom:1.25;}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
body{zoom:1.17;}
}
@media only screen and (min-width: 360px) and (max-width:374px) {
body{zoom:1.125;}
}
或者
@media all and (orientation : landscape) {
h2{color:red;}/*横屏时字体红色*/
}
@media all and (orientation : portrait){
h2{color:green;}/*竖屏时字体绿色*/
}
四、块级化a标签
请保证将每条数据都放在一个a标签中，为何这样做？因为在触控手机上，为提升用户体验，尽可能的保证用户的可点击区域较大。
五、使用自适应布局
1.布局使用百分比：
不同的手机有着不同的分辨率，这时再用我们pc端布局常用的px就不合适了。使用百分比布局要时时刻刻清楚其父元素，因为子元素的百分比高度是根据父元素的高度来确定的，当父元素的高度为不确定值时，或者说父元素的高度未定义时，子元素的高度百分比将没有用（没有参照物）。所以只有设置了父元素的高度，子元素的高度百分比才会有用。
2.em与rem：
em是根据相对单位，不是固定的，他会继承父级元素的字体大小，若没有父级则em的相对基准点为浏览器的字体大小，浏览器的字体默认为16px，因此若无父级元素，相对于浏览器大小：Xem=X*16px;
rem是css3新增属性，是完全相对于HTML根元素大小设定的，默认为10px，因此无论父级字体大小，1rem=10px。
3.栅格布局：
box-sizing:border-box;可以改变盒子模型的计算方式方便你设置宽进行自适应流式布局。
4、wap页面有img标签，记得加上display：block；属性来解决img的边缘空白间隙的1px像素。如果图片要适应不同的手机要设置width:100%;而且不能添加高度。
5、有关Flexbox弹性盒子布局一些属性
1、不定宽高的水平垂直居中
.xxx{
position:absolute;
top:50%;
left:50%;
z-index:3;
-webkit-transform:translate(-50%，-50%)；
border-radius:6px;
background:#fff;
}
2、[flexbox版]不定宽高的水平垂直居中
.xx{
justify-content:center;//子元素水平居中，
align-items:center;//子元素垂直居中;
display:-webkit-flex;
}
6、学会使用webkit-box
可能会问：如何在移动设备上做到完全自适应呢？很感谢webkit为display属性提供了一个webkit-box的值，它可以帮助前端工程师做到盒子模型灵活控制。
六.文本溢出的处理
1、//单行文本溢出
.xx{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
2、//多行文本溢出
.xx{
display:-webkit-box !importmort;
overflow:hidden;
text-overflow:ellipsis;
word-break:break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;(数字2表示隐藏两行)
}
七、图片、媒体的处理
1、//使用流体图片
img{
width:100%;
height:auto;
width:auto\9;
}
2、audio元素和video元素在ios和andriod中无法自动播放
应对方案：触屏即播
$('html').one('touchstart',function(){
audio.play()
})
3、如何禁止保存或拷贝图像
通常当你在手机或者pad上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：
img {
-webkit-touch-callout: none;
}
PS：需要注意的是，该方法只在 iOS 上有效。
八、如何去除iOS和Android中的输入URL的控件条
你的老板或者PD或者交互设计师可能会要求你：能否让我们的webapp更加像nativeapp，我不想让用户看见那个输入url的控件条？
答案是可以做到的。我们可以利用一句简单的javascript代码来实现这个效果：
setTimeout(scrollTo,0,0,0);
请注意，这句代码必须放在window.onload里才能够正常的工作，而且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行
九、圆角问题
放一个图片或者一个按钮，设置圆角会比较美观，设置圆角的值可以用百分比，也可以用em等单位。
element{
border: 1px solid #ccc;
-moz-border-radius: 百分比;
-webkit-border-radius: 百分比;
border-radius: 百分比;
}
如何解决Android 2.0以下平台中圆角的问题
如果大家够细心的话，在做wap站点开发时，大家应该会发现android 2.0以下的平台中问题特别的多，比如说边框圆角这个问题吧。在对一个元素定义圆角时，为完全兼容android 2.0以下的平台，我们必须要按照以下技巧来定义边框圆角：
-webkit这个前缀必须要加上（在iOS中，你可以不加，但android中一定要加）；如果对针对边框做样式定义，比如border:1px solid #000;那么-webkit-border-radius这属性必须要出现在border属性后。假如我们有这样的视觉元素，左上角和右上角是圆角时，我们必须要先定义全局的(4个角的圆角值)-webkit-border-radius:5px;然后再依次的覆盖左下角和右下角，-webkit-border-bottom-left-radius:0; -webkit-border-bottom-right-border:0;否则在android 2.0以下的平台中将全部显示直角，还有记住！-webkit这个前缀一定要加上！
十、禁止内容
1、禁止文本缩放
html {
-webkit-text-size-adjust: 100%;
}
2、移动端禁止选中内容
如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：
.user-select-none {
-webkit-user-select: none;
-webkit-touch-callout: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
兼容IE6-9的写法：onselectstart="return false;" unselectable="on"
十一、如何关闭iOS中键盘自动大写
我们知道在iOS中，当虚拟键盘弹出时，默认情况下键盘是开启首字母大写的功能的，根据某些业务场景，可能我们需要关闭这个功能，移动版本webkit为input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认首字母大写。
<input type="text" autocapitalize="off" />
十二、iOS中如何彻底禁止用户在新窗口打开页面
有时我们可能需要禁止用户在新窗口打开页面，我们可以使用a标签的target=”_self“来指定用户在新窗口打开，或者target属性保持空，但是你会发现iOS的用户在这个链接的上方长按3秒钟后，iOS会弹出一个列表按钮，用户通过这些按钮仍然可以在新窗口打开页面，这样的话，开发者指定的target属性就失效了，但是可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。这个技巧仅适用iOS对于Android平台则无效。
webkit-touch-callout：none
十三、iOS移动端如何清除输入框内阴影
在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：
input,
textarea {
border: 0;
-webkit-appearance: none;
}
十四、边距凹陷
1、像素边框（例子:移动端列表的下边框）
.list-iteam:after{
position: absolute;
left: 0px;
right: 0px;
content: '';
height: 1px;
transform: scaleY(0.5);
-moz-transform: scaleY(0.5);
-webkit-transform:scaleY(0.5);
}
2、
与在pc端开发一样，开发过程中需要的一个很需要注意的问题的边距塌陷，典型的问题是margin-top的嵌套，对子元素设置margin-top值，子元素相对于父元素的位置没有变，而父元素跟着子元素一起向下移动响应的距离。其原理可参考本人之前的笔记css之BFC学习笔记，解决方案：
1.给父元素div1设置一个padding值
.div1{
height: 500px;
width: 100%;
background: #ccc;
padding-top: 1px;
}
十二、 IOS中input键盘事件keyup、keydown、keypress支持不是很好
问题是这样的，用input search做模糊搜索的时候，在键盘里面输入关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进行关键词标红。用input监听键盘keyup事件，在安卓手机浏览器中是可以的，但是在ios手机浏览器中变红很慢，用输入法输入之后，并未立刻响应keyup事件，只有在通过删除之后才能响应！
解决办法：
可以用html5的oninput事件去代替keyup
<input type="text" id="testInput">
<script type="text/javascript">
document.getElementById('testInput').addEventListener('input', function(e){
var value = e.target.value;
});
</script>
然后就达到类似keyup的效果！
十五.移动端框架推荐
1：weUI
官方网址：https://weui.io/
官方介绍：WeUI 是一套同微信原生视觉体验一致的基础样式库,由微信官方设计团队为微信内网页和微信小程序量身设计,令用户的使用感知更加统一。
优点：
做为开发者的我们可以不用写太多css，直接拿过来就可以用。组件都有点击态，大大增加了用户的体验好感，高清屏幕下 border : 0.5
2：Frozen UI
专注于移动web的UI框架,基于腾讯手机QQ规范... FrozenUI提供的CSS组件是目前QQ会员前端开发组所用的通用样式库
官方网址：http://frozenui.github.io/
http://frozenui.github.io/components.html#poptips
优缺点：
基础样式效果简单色调清爽
3：MUI
最接近原生APP体验的高性能前端框架，可多端发布到Appstore、Android市场、浏览器、微信公众号、百度直达号及流应用
官方网址：http://dev.dcloud.net.cn/mui/
优缺点：这个框架给我的吸引之处就是它的 UI 是以 IOS 为 主体设计的，当然它也补充了android特有UI样式。并且MUI官方声称用来开发深入以后发现拿它做 APP 还能够提高用户使用流畅度但网址上对它的评价是一种深入骨髓的廉价感。
4：SUI Mobile
介绍 SUI Mobile 是一套基于 Framework7 开发的UI库。它非常轻量、精美，阿里前端团队出品的SUIMobile的前端UI库，方便迅速搭建手机H5应用,也非常适合开发跨平台Web App
官方网站 http://m.sui.taobao.org/getting-started/
优缺点：
兼容性好，能兼到 iOS 6.0+ 和 Android 4.0+
风格：炫酷的iOS风格功能强大的组件轻量的UI库，开始使用，只需要几个简单的步骤
缺点：sui mobile会和jquery冲突:后期维护/编写都很麻烦，开发人员以及离职，大半年都没有维护了
Github：https://github.com/sdc-alibaba/SUI-Mobile
Demo：http://m.sui.taobao.org/demos/
专注于开发的：http://framework7.taobao.org/
1、关闭iOS键盘首字母自动大写
<input type="text" autocapitalize="off" />
2、禁止文本缩放
html {
-webkit-text-size-adjust: 100%;
}
3、移动端如何清除输入框内阴影
在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：
input,
textarea {
border: 0;
-webkit-appearance: none;
}
4、忽略页面的数字为电话，忽略email识别
<meta name="format-detection" content="telephone=no, email=no"/>
5、快速回弹滚动
.xxx {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
PS：iScroll用过之后感觉不是很好，有一些诡异的bug，这里推荐另外一个 iDangero Swiper，这个插件集成了滑屏滚动的强大功能（支持3D），而且还有回弹滚动的内置滚动条，官方地址：
http://www.idangero.us/sliders/swiper/index.php
6、移动端禁止选中内容
div {
-webkit-user-select: none;
}
7、移动端取消touch高亮效果
在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 :active 的元素，默认都会在激活状态时，显示高亮框，如果不想要这个高亮，那么你可以通过css以下方法来禁止：
.xxx {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
8、如何禁止保存或拷贝图像
通常当你在手机或者pad上长按图像 img ，会弹出选项 存储图像 或者 拷贝图像，如果你不想让用户这么操作，那么你可以通过以下方法来禁止：
img {
-webkit-touch-callout: none;
}
PS：需要注意的是，该方法只在 iOS 上有效。
9、解决字体在移动端比例缩小后出现锯齿的问题：
-webkit-font-smoothing: antialiased;
10、栅格布局：
box-sizing:border-box;可以改变盒子模型的计算方式方便你设置宽进行自适应流式布局
11、input[type=input]{-webkit-appearance:none;}移除ios的样式，但这个属性存在bug，会导致iso无法获取checkbox值，给这个元素重新赋上input[type=checkbox]{-webkit-appearance:checkbox;}就不会报错了。
12、按钮被按下效果的实现需要给a标签加a:active属性和添加一段空函数
document.body.addEventListener('touchend', function () { });
13、解决去掉下边框：
-webkit-border-bottom:none;
14、英文文本换行(不拆分单词)：
word-wrap:break-word
15、字体大小尽量使用pt或者em，rem，代替px。
16、设置input里面placeholder字体的大小
::-webkit-input-placeholder{ font-size:10pt;}
17、wap页面有img标签，记得加上display：block；
属性来解决img的边缘空白间隙的1px像素。如果图片要适应不同的手机要设置width:100%;而且不能添加高度。
18. 移动端如何清除输入框内阴影
在iOS上，输入框默认有内部阴影，但无法使用 box-shadow 来清除，如果不需要阴影，可以这样关闭：
input,
textarea {
border: 0;
-webkit-appearance: none;
}
19. 移动端禁止选中内容
如果你不想用户可以选中页面中的内容，那么你可以在css中禁掉：
.user-select-none {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
兼容IE6-9的写法：onselectstart="return false;" unselectable="on"
20.audio元素和video元素在ios和andriod中无法自动播放
应对方案：触屏即播
$('html').one('touchstart',function(){
audio.play()
})
21.手机拍照和上传图片
<input type="file">的accept 属性
<!-- 选择照片 -->
<input type=file accept="image/*">
<!-- 选择视频 -->
<input type=file accept="video/*">
ios 有拍照、录像、选取本地图片功能
部分android只有选取本地图片功能
winphone不支持
input控件默认外观丑陋
22. 消除transition闪屏
.css{
-webkit-transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
}
23.开启硬件加速 解决页面闪白 保证动画流畅
.css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
设计高性能CSS3动画的几个要素
尽可能地使用合成属性transform和opacity来设计CSS3动画，
不使用position的left和top来定位
利用translate3D开启GPU加速
**************************************************************************
框架
1. 移动端基础框架
zepto.js 语法与jquery几乎一样，会jquery基本会zepto~
iscroll.js 解决页面不支持弹性滚动，不支持fixed引起的问题~ 实现下拉刷新，滑屏，缩放等功能~
underscore.js 该库提供了一整套函数式编程的实用功能，但是没有扩展任何JavaScript内置对象。
fastclick 加快移动端点击响应时间
animate.css CSS3动画效果库
Normalize.css Normalize.css是一种现代的、CSS reset为HTML5准备的优质替代方案
2. 滑屏框架
适合上下滑屏、左右滑屏等滑屏切换页面的效果
slip.js
iSlider.js
fullpage.js
swiper
3.瀑布流框架
masonry
工具推荐
caniuse 各浏览器支持html5属性查询
paletton 调色搭配
对于网站字体设置
移动端项目：
font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC",sans-self;
移动和pc端项目：
font-family:Tahoma,Arial,Roboto,"Droid Sans","Helvetica Neue","Droid Sans Fallback","Heiti SC","Hiragino Sans GB",Simsun,sans-self;
有关Flexbox弹性盒子布局一些属性
不定宽高的水平垂直居中
.xxx{
position:absolute;
top:50%;
left:50%;
z-index:3;
-webkit-transform:translate(-50%，-50%)；
border-radius:6px;
background:#fff;
}
[flexbox版]不定宽高的水平垂直居中
.xx{
justify-content:center;//子元素水平居中，
align-items:center;//子元素垂直居中;
display:-webkit-flex;
}
//单行文本溢出
.xx{
overflow:hidden;
white-space:nowrap;
text-overflow:ellipsis;
}
多行文本溢出
.xx{
display:-webkit-box !importmort;
overflow:hidden;
text-overflow:ellipsis;
word-break:break-all;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;(数字2表示隐藏两行)
}
使用流体图片
img{
width:100%;
height:auto;
width:auto\9;
}
一像素边框（例子:移动端列表的下边框）
.list-iteam:after{
position: absolute;
left: 0px;
right: 0px;
content: '';
height: 1px;
transform: scaleY(0.5);
-moz-transform: scaleY(0.5);
-webkit-transform:scaleY(0.5);
}
三、移动端布局与适配
1、iscroll安卓低版本卡顿
2、移动布局自适应不同屏幕是几种方式
3、移动端调试？
4、移动端web分辨率
网友评论