H5混合开发中android终端和ios终端常见的兼容问题
1、安卓浏览器看背景图⽚，有些设备会模糊。
⽤同等⽐例的图⽚在PC机上很清楚，但是⼿机上很模糊，原因是什么呢？
经过研究，是devicePixelRatio作怪，因为⼿机分辨率太⼩，如果按照分辨率来显⽰⽹页，这样字会⾮常⼩，所以苹果当初就把iPhone 4
的960640分辨率，在⽹页⾥只显⽰了480320，这样devicePixelRatio＝2。现在android⽐较乱，有1.5的，有2的也有3的。让图⽚在
⼿机⾥显⽰更为清晰，必须使⽤2x的背景图来代替img标签（⼀般情况都是⽤2倍）。例如⼀个div的宽⾼是100100，背景图必须得200200，然后background-size:contain;，这样显⽰出来的图⽚就⽐较清晰了。
代码如下：
background:url(../images/icon/all.png) no-repeat center center;
-webkit-background-size:50px 50px;
background-size: 50px 50px;display:inline-block; width:100%; height:50px;
或者指定 background-size:contain；都可以，⼤家试试！
<li><canvas></canvas></li>
js动态加载图⽚和li 总共举例17张图⽚！
var total=17;
var zWin=$(window);
var render=function(){
var padding=2;
var winWidth=zWin.width();
var picWidth=Math.floor((winWidth-padding*3)/4);
var tmpl ='';
for (var i=1;i<=totla;i++){
var p=padding;
var imgSrc='img/'+i+'.jpg';
if(i%4==1){
p=0;
}
tmpl +='<li ><canvas id="cvs_'+i+'"></canvas></li>' var imageObj = new Image();
imageObj.index = i;
var cvs =$('#cvs_'+this.index)[0].getContext('2d');
cvs.width = this.width;
cvs.height=this.height;
cvs.drawImage(this,0,0);
}
imageObj.src=imgSrc;
}
}
render();
Element {
-webkit-user-select: none;
-moz-user-select: none;
原生安卓app开发-khtml-user-select: none;
user-select: none;
}
解决移动设备可选中页⾯⽂本(视产品需要⽽定)
11、长时间按住页⾯出现闪退
element {
-webkit-touch-callout: none;
}
12、iphone及ipad下输⼊框默认内阴影
Element{
-webkit-appearance: none;
}
13、ios和android下触摸元素时出现半透明灰⾊遮罩 Element {
-webkit-tap-highlight-color:rgba(255,255,255,0)
}
14、active兼容处理 即 伪类 :active 失效
⽅法⼀：body添加ontouchstart
⽅法⼆：js给 document 绑定 touchstart 或 touchend 事件
<style>
a {
color: #000;
}
a:active {
color: #fff;
}
</style>
<a herf=foo >bar</a>
<script>
document.addEventListener('touchstart',function(){},false);
</script>
15、动画定义3D启⽤硬件加速
Element {
-webkit-transform:translate3d(0, 0, 0)
transform: translate3d(0, 0, 0);
}
16、Retina屏的1px边框
具体请百度⾕歌关键字，解决⽅案有很多
17、webkit mask 兼容处理
某些低端⼿机不⽀持css3 mask，可以选择性的降级处理。 ⽐如可以使⽤js判断来引⽤不同class：
if( 'WebkitMask' in document.documentElement.style){
alert('⽀持mask');
} else {
alert('不⽀持mask');
}
18、旋转屏幕时，字体⼤⼩调整的问题
html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:100%;
}
19、transition闪屏
/设置内嵌的元素在 3D 空间如何呈现：保留3D /
-webkit-transform-style: preserve-3d;
/ 设置进⾏转换的元素的背⾯在⾯对⽤户时是否可见：隐藏 /
-webkit-backface-visibility:hidden;
20、圆⾓bug
某些Android⼿机圆⾓失效
background-clip: padding-box;
21、顶部状态栏背景⾊
说明：
除⾮你先使⽤apple-mobile-web-app-capable指定全屏模式，否则这个meta标签不会起任何作⽤。
如果content设置为default，则状态栏正常显⽰。如果设置为blank，则状态栏会有⼀个⿊⾊的背景。如果设置为blank-translucent，则
状态栏显⽰为⿊⾊半透明。
如果设置为default或blank，则页⾯显⽰在状态栏的下⽅，即状态栏占据上⽅部分，页⾯占据下⽅部分，⼆者没有遮挡对⽅或被遮挡。
如果设置为blank-translucent，则页⾯会充满屏幕，其中页⾯顶部会被状态栏遮盖住（会覆盖页⾯20px⾼度，⽽iphone4和itouch4的
Retina屏幕为40px）。
默认值是default。
22、设置缓存
<meta http-equiv="Cache-Control" content="no-cache" />
⼿机页⾯通常在第⼀次加载后会进⾏缓存，然后每次刷新会使⽤缓存⽽不是去重新向服务器发送请求。如果不希望使⽤缓存可以设置no-
cache。
23、桌⾯图标
<link rel="apple-touch-icon" href="touch-icon-iphone.png" />
<link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png" />
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png" />
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png" />
iOS下针对不同设备定义不同的桌⾯图标。如果不定义则以当前屏幕截图作为图标。
上⾯的写法可能⼤家会觉得会有默认光泽，下⾯这种设置⽅法可以去掉光泽效果，还原设计图的效果！
<link rel="apple-touch-icon-precomposed" href="touch-icon-iphone.png" />
图⽚尺⼨可以设定为57*57（px）或者Retina可以定为114*114（px），ipad尺⼨为72*72（px)
24、启动画⾯
<link rel="apple-touch-startup-image" href="start.png"/>
iOS下页⾯启动加载时显⽰的画⾯图⽚，避免加载时的⽩屏。可以通过madia来指定不同的⼤⼩：
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
<!-- iPhone Retina -->
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"
<!-- iPhone 5 -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-
webkit-device-pixel-ratio: 2)" href="apple-touch-start <!-- iPad portrait -->
<link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />
<!-- iPad landscape -->
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"
<!-- iPad Retina portrait -->
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)"
<!-- iPad Retina landscape -->
<link href="apple-touch-startup-image-1496x2048.png"media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio:
25、浏览器私有及其它meta
以下属性在项⽬中没有应⽤过，可以写⼀个demo测试以下！
<!-- 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">
<!-- UC浏览器私有 -->
<!-- 全屏模式 -->
<meta name="full-screen" content="yes">
<!-- 强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- 强制横屏 -->
<meta name="screen-orientation" content="landscape">
<!-- 应⽤模式 -->
<meta name="browsermode" content="application">
其它，针对⼿持设备优化，主要是针对⼀些⽼的不识别viewport的浏览器，⽐如⿊莓
<meta name="HandheldFriendly" content="true">
微软的⽼式浏览器
<meta name="MobileOptimized" content="320">
windows phone 点击⽆⾼光
<meta name="msapplication-tap-highlight" content="no">
26、 IOS中input键盘事件keyup、keydown、keypress⽀持不是很好
问题是这样的，⽤input search做模糊搜索的时候，在键盘⾥⾯输⼊关键词，会通过ajax后台查询，然后返回数据，然后再对返回的数据进⾏关键词标红。
⽤input监听键盘keyup事件，在安卓⼿机浏览器中是可以的，但是在ios⼿机浏览器中变红很慢，⽤输⼊法输⼊之后，并未⽴刻相应keyup 事件，只有在通过删除之后才能相应！
解决办法：
可以⽤html5的oninput事件去代替keyup
<input type="text" id="testInput">
<script type="text/javascript">
var value = e.target.value;
});
</script>
然后就达到类似keyup的效果！
27、h5⽹站input 设置为type=number的问题
h5⽹页input 的type设置为number⼀般会产⽣三个问题，⼀个问题是maxlength属性不好⽤了。另外⼀个是form提交的时候，默认给取整了。三是部分安卓⼿机出现样式问题。
⼀解决，我⽬前⽤的是js。如下
<input type="number" oninput="checkTextLength(this ,10)">
function checkTextLength(obj, length) {
if(obj.value.length > length) {
obj.value = obj.value.substr(0, length);
}
}
问题⼆，是因为form提交默认做了表单验证，step默认是1，要设置step属性，假如保留2位⼩数，写法如下：
<input type="number" step="0.01" />
关于step，我在这⾥做简单的介绍，input 中type=number，⼀般会⾃动⽣成⼀个上下箭头，点击上箭头默认增加⼀个step，点击下箭头默认会减少⼀个step。number中默认step是1。也就是step=0.01，可以允许输⼊2位⼩数，并且点击上下箭头分别增加0.01和减少
0.01。
假如step和min⼀起使⽤，那么数值必须在min和max之间。
看下⾯的例⼦：
<input type="number" step="3.1" min="1" />
输⼊框可以输⼊哪些数字？
⾸先，最⼩值是1，那么可以输⼊1.0，第⼆个是可以输⼊（1+3.1）那就是4.1，以此类推，每次点击上下箭头都会增加或者减少3.1，输⼊其他数字⽆效。这就是step的简单介绍。
问题三，去除input默认样式
input[type=number] {
-moz-appearance:textfield;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
margin: 0;
}
28、ios 设置input 按钮样式会被默认样式覆盖
解决⽅式如下：
input,
textarea {
border: 0;
-webkit-appearance: none;
}
设置默认样式为none
29、IOS键盘字母输⼊，默认⾸字母⼤写
解决⽅案，设置如下属性
<input type="text" autocapitalize="off" />
30、select 下拉选择设置右对齐
设置如下：
select option {
direction: rtl;
}
31、通过transform进⾏skew变形，rotate旋转会造成出现锯齿现象可以设置如下：
-webkit-transform: rotate(-4deg) skew(10deg) translateZ(0);
transform: rotate(-4deg) skew(10deg) translateZ(0);
outline: 1px solid rgba(255,255,255,0)
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论