视图meta viewport
<meta name = "viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1,user-scalable=0">
属性含义
移动端会将980px的PC端网页自行缩放导致边缘留白或者是字体过小。
| 属性 | 含义 |
|---|---|
| width=device-width | 设备宽度 |
| minimum-scale | 最大缩小比例 |
| maximum-scale | 最大放大比例 |
| initial-scale | 初始比例 |
| user-scalable | 是否允许放缩 |
图片适配
图片最大为自身最大宽度,防止外界容器过大导致图片变形。
img{
max-width:100%
}
//下列不正确`
img{
width:100%
}
媒体查询
CSS3新增的@media。
动态rem
实现响应式布局
可在根元素设置font-size
其他问题
click的300ms延迟
Safari浏览器决定300ms内点开链接还是进行缩放
- 使用
meta的viewport
user-scalable=no完全禁止用户缩放width=device-width实现移动端响应式适配,禁用300ms
- 引用库
fastclick
touchend触发时通过DOM模拟click事件,并阻拦300ms后的click事件
点击穿透
点击后的触发事件:touchstart->touchend->click
A在B元素上。点击A后A隐藏,300ms后click事件触发,导致A被click
本文探讨了移动端适配的几个关键方面,包括视图的处理,如何做图片适配以防止图片变形,利用媒体查询实现响应式设计,以及解决300ms延迟和点击穿透问题。通过对根元素设置样式和使用特定技术,可以有效优化移动端用户体验。

被折叠的 条评论
为什么被折叠?



