ios滚动不顺滑问题
-webkit-overflow-scrolling: touch
键盘唤起，固定底部也开始滚动问题
// 当底部根据页面进行fixed定位的时候，键盘弹出一瞬间，fixed会失效， 变成类似absoult, 让main的内容滚动，就不会连带footer一起动了
启用全屏模式
// apple-mobile-web-app-capable 删除默认的苹果工具栏和菜单栏， 默认为no
// apple-touch-fullscreen 全屏显示
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="apple-touch-fullscreen" content="yes"/>
自定义h5页面上的添加到主屏幕的icon
<link href="short-cut.png" rel="apple-touch-icon-precomposed">
禁止页面自动识别数字为手机号码
<meta name="format-detection" content="telephone=no">
// 当要指定某数字为手机号码时
<a href="tel: 13290987765">13290987765</a>
// 当要指定号码发送短信时
<a href="sms: 13290987765">13290987765</a>
禁止页面自动识别数字为邮箱
<meta name="format-detection" content="email=no">
// 当要指定号码发送邮箱时
<a href="mailto: 13290987765@qq.com">13290987765</a>
优先启用最新版本IE和Chrome进行渲染
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
移动端默认样式
-
移动端默认字体
1、数字和英文字体可使用Helvetica字体， ios和Android都有这个字体
2、手机系统都有自己的默认字体，直接使用默认的
body{ font-family: Helvetica } -
字体大小
如果只是适配手机，可以使用px
-
ios系统中，链接，按钮等点击会有灰色遮罩
a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0)} -
去除圆角
button,input{ -webkit-appearance: none; border-radius: 0 } -
禁止文本自动缩放
html { -webkit-text-size-adjust: 100% }默认样式问题总结
- 大部分问题还是需要依赖js来解决
- 移动端默认样式需要清除高亮、圆角、禁止文本缩放、字体设置
- 调试检查xampp，重点：同一网络
- iphonex大部分软件已经做了头部适配
- 因为像素比问题，我们有时候需要处理1px和图片模糊问题
