一、IOS自带safari浏览器
1、safari不支持fixed+input输入框。
解决方案：
http://www.haorooms.com/post/ios_fixed_input
2、safari图片加载失败，默认图片过大。
解决方案：
http://www.haorooms.com/post/img_faile_jiangrong
3、ios默认safari浏览器对齐问题解决
调试方法：
二、安卓UC浏览器
1、安卓UC为代表的浏览器不支持部分css3属性，例如calc等 width:90%;width:calc(sdadas);
2、滚动事件不会触发touchmove事件
三、手机浏览器通用问题
1、弹出层touchmove滚动，会触发body滚动（出现前提是body中有滚动轴）
http://www.haorooms.com/post/webapp_bodyslidebcdiv
2、假如你整个网页用rem字体，部分安卓浏览器出现字体过大的情况。
3、部分安卓浏览器对margin要求比较苛刻。
一、关于meta
（一）、常用的公共meta属性
1、viewport
<metaname="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0"/>
width=device-width 宽度是设备屏幕的宽度（像素）
height=device-height 高度是设备屏幕的高度（像素）
initial-scale 初始的缩放比例
minimum-scale 允许用户缩放到的最小比例
maximum-scale 允许用户缩放到的最大比例
user-scalable 用户是否可以手动缩放
2、Format-detection
format-detection翻译成中文的意思是“格式检测”，顾名思义，它是用来检测html里的一些格式的，那关于meta的format-detection属性主要是有以下几个设置：
meta name="format-detection" content="telephone=no"
meta name="format-detection" content="email=no"
meta name="format-detection" content="adress=no"
也可以连写：meta name="format-detection" content="telephone=no,email=no,adress=no"
一般只要禁用手机拨号即可
3、http-equiv
http-equiv顾名思义，相当于http的文件头作用，它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容，与之对应的属性值为content，content中的内容其实就是各个参数的变量值。 meat标签的http-equiv属性语法格式是：＜meta http-equiv="参数" content="参数变量值"＞ ；
<meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
（二）、IOS私有meta属性
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
（四）、其他浏览器私有meta属性【除非特需，一般不推荐使用】
1、QQ浏览器私有
全屏模式
<meta name="x5-fullscreen" content="true">
强制竖屏
<meta name="x5-orientation" content="portrait">
强制横屏
<meta name="x5-orientation" content="landscape">
应用模式
<meta name="x5-page-mode" content="app">
2、UC浏览器私有
全屏模式
<meta name="full-screen" content="yes">
强制竖屏
<meta name="screen-orientation" content="portrait">
强制横屏
<meta name="screen-orientation" content="landscape">
应用模式
<meta name="browsermode" content="application">
二、关于样式
1、上下拉动滚动条时卡顿、慢
body {
-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;
}
2、禁止复制、选中文本
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
解决移动设备可选中页面文本(视产品需要而定)
3、长时间按住页面出现闪退
element {
-webkit-touch-callout: none;
}
4、iphone及ipad下输入框默认内阴影
Element{
-webkit-appearance: none;
}
5、ios和android下触摸元素时出现半透明灰色遮罩
Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
设置alpha值为0就可以去除半透明灰色遮罩，备注：transparent的属性值在android下无效。
后面一篇文章有详细介绍，地址：http://www.haorooms.com/post/phone_web_ysk
6、active兼容处理
<body ontouchstart="">
7、动画定义3D启用硬件加速
Element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}
注意：3D变形会消耗更多的内存与功耗
8、Retina屏的1px边框
Element{
border-width: thin;
}
9、旋转屏幕时，字体大小调整的问题
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}
10、transition闪屏
/设置内嵌的元素在 3D 空间如何呈现：保留3D /
-webkit-transform-style: preserve-3d;
/ 设置进行转换的元素的背面在面对用户时是否可见：隐藏 /
-webkit-backface-visibility:hidden;
11、圆角bug
某些Android手机圆角失效
background-clip: padding-box;
踩
(0)
赞
(0)
举报
评论 一句话评论（0）