1. 关于移动端 css 样式：
1
2
3
4
5
6
7
8
9
10
11
12
|
html{
-webkit-text-size-adjust: 100%;
}
[data-dpr="3"] span{
font-size: 30px;
}
{-webkit-apperance: none}
|
2. 文字的换行与否(此处使用less语法)
1
2
3
4
5
6
7
8
9
|
.break(){
word-break: break-all;
word-wrap: break-word;
}
.nowrap(){
white-space: nowrap;
}
|
3. 移动端开发以 rem 作为单位时,难免会出现 1px 的偏差，所有制作雪碧图时，图与图之间应适当留出 2~4px 的间隔隙
(有待验证)
4. 解决iframe在ios设备上无法滚动, 在iframe外包裹一层div并设置其css属性为：
1
2
| -webkit-overflow-scrolling:touch;
overflow:auto;
|
值得注意的是，如果仍未解决。尝试给定 iframe{height: 200px; width: 300px;}，且标签上添加属性 <iframe src="xx" scrolling="yes"></iframe>
5. 给按钮增加可点击的热区独特方法
1
2
3
4
5
6
7
8
| button:after{
content:"";
position:absolute;
left:-2px;
right:-2px;
bottom:-2px;
top:-2px;
}
|
6. 给移动端的元素添加被点击(或者长按)的效果，不需要使用 js
1
2
3
| div:active{
background: #666
}
|
只添加上面的样式，:active 在移动端不一定（已经引入 zepto 的已经包含下面的 js 了）生效，需要下面的js
document.body.addEventListener('touchstart', function() {}, false);
也可以直接在body上添加 ontouchstart 属性，即 <body ontouchstart="">...</body>
7. 在IOS下，如果最后一个div底部需要有剩余空间，但是使用margin-bottom且该DOM是动态生成时，在个别IOS手机下不会产生间距。故最好使用padding-bottom
8. 给表格的 tr 添加 hover 效果，一般直接添加 tr:hover{background: @color} 即可。但是当 td 有背景色时，不能有 hover 效果。只需改成 tr:hover td{background:@color} 即可
9. 如果对body添加 padding-top ,并且有元素定位fixed时, 在iphone 端会出现fixed的元素消失了, 在拉动的时候可以看到.解决办法: 不对body添加padding-top, 而是对body > div 添加改padding-top
10. 移动端做 全屏 页面时,高度应该使用百分比,宽度可仍使用rem.否则,如果高度不使用百分比,一些比较小屏的机型,很有可能出现只显示一部分内容
11. padding和margin如果设为百分比, 那么这个百分比是相对于宽度的(特殊)
12. 移动端开发应尽量避免使用 position: fixed, 因为 iphone 手机可能出现抖动或消失的情况. 一般使用一下仍可以实现类似 固定定位的效果, 如
1
2
3
4
5
6
7
8
9
| .paren{
box-sizing: border-box;
padding-bottom: 44px;
}
.fiex{
position: absolute
}
|
