ios与安卓样式兼容问题

电玩女神 2022-02-16 11:19 434阅读 0赞

1.margin在IOS中失效   
　　在页面中元素使用margin值，在某些IOS设备下会出现失效的情况，而安卓机则正常显示，此问题暂无直接的解决方案，当前使用空DIV控制间距。

2.fixed定位问题   
　　整个页面的fixed定位，在ios下下拉会触发下拉事件，但是没有动画效果。Android就能正常运行   
　flex中使用 绝对定位，ios出现严重错位，导致父级元素也会变成绝对定位，Android能达到理想效果   
　总而言之 尽量不用fixed

3.absolute定位问题   
　　①使用absolute定位，并且宽带设置了100% 并且设置了padding就会导致屏幕宽度溢出，出现页面左右可以移动的bug，模拟器上是没有问题，但是真机上是有这个问题的。这个问题让我调试并痛苦了许久   
　　②使用absolute并且当前元素是flex容器这种情况在Ios下面布局不会起到左右，会出现所有元素转换成了absloute并且文字错位   
　　③总而言之 尽量不用 absolute

4. word-spacing在button中的问题   
　　有时候在使用大按钮的时候两个字中间希望有段间距，但是目前没有找到能使用的占位符，所以使用了的word-spacing加空格 这个方法来设置文字的间距，但是在iPhone6s 上两个字中间一个空格的时候整体会向右偏，必须设置两个空格。

5、安卓浏览器看背景图片，有些设备会模糊。

//用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？
    经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以苹果当初就把iPhone 4的960*640分辨率，在网页里只显示了480*320，这样devicePixelRatio＝2。现在android比较乱，有1.5的，有2的也有3的。
    想让图片在手机里显示更为清晰，必须使用2x的背景图来代替img标签（一般情况都是用2倍）。例如一个div的宽高是100*100，背景图必须得200*200，然后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;

6、h5页面有个很蛋疼的问题就是，当输入框在最底部，点击软键盘后输入框会被遮挡。

//可采用如下方式解决
    var oHeight = $(document).height(); //浏览器当前的高度
     $(window).resize(function(){ 
          if($(document).height() < oHeight){ 
                $("#footer").css("position","static"); 
          }else{ 
                $("#footer").css("position","absolute");
          } 
    });

7、不让 Android 手机识别邮箱

8、禁止 iOS 识别长串数字为电话

9、禁止 iOS 弹出各种操作窗口

-webkit-touch-callout:none

10、消除 transition 闪屏

-webkit-transform-style: preserve-3d; /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
    -webkit-backface-visibility: hidden; /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/

11、iOS 系统中文输入法输入英文时，字母之间可能会出现一个六分之一空格

可以通过正则去掉     
     this.value = this.value.replace(/\u2006/g, '');

12、禁止ios和android用户选中文字

-webkit-user-select:none

13、在ios和andriod中,audio元素和video元素无法自动播放

//解决方案：触屏即播
    $('html').one('touchstart',function(){ audio.play()})

14、ios下取消input在输入的时候英文首字母的默认大写

15、android下取消输入语音按钮

input::-webkit-input-speech-button {display: none}

16、CSS动画页面闪白,动画卡顿

//解决方法:
    1.尽可能地使用合成属性transform和opacity来设计CSS3动画，不使用position的left和top来定位
    2.开启硬件加速
      -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);

17、阻止旋转屏幕时自动调整字体大小

html, body, form, fieldset, p, div, h1, h2, h3, h4, h5, h6 {-webkit-text-size-adjust:none;}

18、Input 的placeholder会出现文本位置偏上的情况

input 的placeholder会出现文本位置偏上的情况：
    PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal;

19、往返缓存问题

点击浏览器的回退，有时候不会自动执行js，特别是在mobile safari中。这与*往返缓存(bfcache)*有关系。
    解决方法 ：window.onunload = function(){};

20、calc的兼容性处理

CSS3中的calc变量在iOS6浏览器中必须加-webkit-前缀，目前的FF浏览器已经无需-moz-前缀。
    Android浏览器目前仍然不支持calc，所以要在之前增加一个保守尺寸：
    div { width: 95%; width: -webkit-calc(100% - 50px); width: calc(100% - 50px); }

21、iOS6下伪类:hover

除了<a>之外的元素无效；
    在Android下则有效。类似
    div#topFloatBar_l:hover  #topFloatBar_menu { display:block; }
    这样的导航显示在iOS6点击没有点击效果，只能通过增加点击侦听器给元素增减class来控制子元素。

22、在移动端修改难看的点击的高亮效果，iOS和安卓下都有效：

*{-webkit-tap-highlight-color:rgba(0,0,0,0);}
    不过这个方法在现在的安卓浏览器下，只能去掉那个橙色的背景色，点击产生的高亮边框还是没有去掉，有待解决！

23、html5调用安卓或者ios的拨号功能

html5提供了自动调用拨号的标签，只要在a标签的href中添加tel:就可以了。
    如下：
    <ahref="tel:4008106999,1034">400-810-6999 转 1034</a>
    拨打手机直接如下:
     <a href="tel:15677776767">点击拨打15677776767</a>

24、上下拉动滚动条时卡顿、慢

body {
        -webkit-overflow-scrolling:touch; 
        overflow-scrolling: touch;
    }

25、启动画面