移动端个人问题总结

最新推荐文章于 2022-09-25 21:33:10 发布

luckSll

最新推荐文章于 2022-09-25 21:33:10 发布

阅读量284

点赞数

本文链接：https://blog.csdn.net/qq_29030071/article/details/76048308

版权

移动端ios与android的一些兼容问题

1.1关于滚动：为了使ios的滚动更流畅，-webkit-overflow-scrolling:touch;

 
   .scrollContainer{ 
  
   width: 
    100%; 
  
   height: 
    auto; 
  
   position: 
    absolute; 
  
   top: 
   0; 
  
   bottom: 
    1.2rem; 
  
   z-index: 
    0; 
  
   overflow-y: 
    auto; 
  
   overflow-x: 
    hidden; 
  
   -webkit-overflow-scrolling: 
    touch; 
  
    }

1.2 关于 ios上input默认样式问题（上边框阴影与圆角）

        input {
            border: 1px solid #f0f0f0;
            height: 25px;
            width: 150px;
            -webkit-appearance: none;
            /**去掉iPhone上边框内阴影*/
            -moz-appearance: none;
            border-radius: 0;
            /**去掉iPhone自动添加的圆角*/
        }

1.3 更改表单输入框placeholder的颜色与字体大小

input:-ms-input-placeholder{
    color: #cccccc;
    font-size: .4rem;
}
input::-webkit-input-placeholder{
    color: #cccccc;     
    font-size: .4rem;
     
} 
input:-moz-placeholder {   
    color: #cccccc;   
    font-size: .4rem;       
}

1.4 禁止用户选中文字

.text{
     -webkit-user-select:none;
}

1.5 实现手机端打电话，发邮件，发短信

i.打电话

     <a href="tel:0755-10086">打电话给:0755-10086</a>

ii.发短信，winphone系统无效

     <a href="sms:10086">发短信给: 10086</a>

iii.发邮件

     <a href="mailto:peun@foxmail.com">peun@foxmail.com</a>

1.6模拟pc端hover效果（有些不兼容）

	<div class="btn">按钮</div>
        <div class="btn2">按钮</div>  
        .btn,.btn2{
            width: 65%;
            height: 40px;
            line-height: 40px;
            margin:0 auto;
            background: #f0f0f0;
            text-align: center;
            border-radius: 6px;
        }
        .btn:active{
            background: #47b34f
        } 
        .btn2:hover{
            background: #47b34f            
        }

用手机端的touchstart，touchend来模拟实现按钮hover效果可以做到全兼容

<body>
<div class="btn-blue">按钮</div>
<script type="text/javascript">
var btnBlue = document.querySelector(".btn-blue");
btnBlue.ontouchstart = function(){
    this.className = "btn-blue btn-blue-on"
}
btnBlue.ontouchend = function(){
    this.className = "btn-blue"
}
</script>
</body>

1.7判断手机横屏竖屏问题，显示不同样式

        @media all and (orientation:portrait) {
            /*竖屏 纵向 即指定输出设备中的页面可见区域高度大于或等于宽度**/
            .css {background: #47b34f}
        }
        @media all and (orientation:landscape) {
            /*横屏**/            
            .css {background: red}
        }

        window.onorientationchange = function () {
            switch (window.orientation) {
                case -90:
                case 90:
                    alert("横屏" + window.orientation)

                case 0:
                case 180:
                    alert("竖屏" + window.orientation);
                    break
            }
        }

1.8audio元素和video元素在ios和android无法自动播放问题

$('html').one('touchstart',function(){
    audio.play()
})

1.9视频播放不全屏

<!--
1.目前只有ios7+、winphone8+支持自动播放
2.支持Airplay的设备（如：音箱、Apple TV)播放
x-webkit-airplay="true" 
3.播放视频不全屏，ios7、、winphone8+支持，部分android4+支持（含华为、小米、魅族）
webkit-playsinline="true" 
4.ios 10 : playsinline
5.ios 8、9 ：https://github.com/bfred-it/iphone-inline-video
-->
<video x-webkit-airplay="true" webkit-playsinline="true" preload="auto" autoplay src="http://"></video>
<video playsinline preload="auto" autoplay src="http://"></video>

2.0禁止ios中开启的首字母自动大写功能

<form autocapitalize="off">
  <input type="text"  placeholder="继承 form 的设置">
  <textarea></textarea>
</form>

或<input type="text" autocapitalize="off" placeholder="用户名-关闭首字母大写">

还可进行如下设置，使其单词首字母大写，每句首字母大写，每个字母大写。

当设置了autocapitalize="words"时，每个单词的开头字母会自动大写。

当设置了autocapitalize="characters" 时，每个字母都会大写。

当设置了autocapitalize="sentences" 时，每句开头字母会自动大写。

<input type="password"/>始终不会开启首字母大写。

2.1 android去掉语音输入按钮

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

移动端ios与android的一些兼容问题

1.1关于滚动：为了使ios的滚动更流畅，-webkit-overflow-scrolling:touch;

 
    .scrollContainer{ 
   
    width: 
     100%; 
   
    height: 
     auto; 
   
    position: 
     absolute; 
   
    top: 
    0; 
   
    bottom: 
     1.2rem; 
   
    z-index: 
     0; 
   
    overflow-y: 
     auto; 
   
    overflow-x: 
     hidden; 
   
    -webkit-overflow-scrolling: 
     touch; 
   
     }

  <b><p>1. 三星I9100 （Android 4.0.4）不支持display:-webkit-flex这种写法的弹性布局，</p> 
         <p>但支持display:-webkit-box这种写法的布局, </p>
         <p>相关的属性也要相应修改，如-webkit-box-pack: center;</p>
         <p>移动端采用弹性布局时，建议直接写display:-webkit-box系列的布局</p>
         </b>
  <b><p>2. touchmove事件在Android部分机型(如LG Nexus 5 android4.4，小米2 android 4.1.1)上只会触发一次</p> 
         <p>解决方案是在触发函数里面加上e.preventDefault(); 记得将e也传进去。</p>
         </b>

 
    * IOS（7.1.1版本）滚动元素中设定其中某个元素的 
     `innerHTML` 属性一定机率导致画面闪动（估计是触发了重绘）， 
   
     解决办法是设置文字时使用 
    `textContent`属性。 
   
    * IOS（7.1.1版本）动态改变滚动元素中某个元素 
     `top` 属性一定机率导致画面闪动，解决办法是使用 
    `translateY` 替代 
   
    * IOS（7.1.1版本）通过 
    `-webkit-overflow-scrolling: touch`方式设定的滚动元素时，如果滚到头的时候拖动，会出现页面的整体滚动， 
   
     解决办法见< 
    https://github.com/chemzqm/scrollfix/blob/master/index.js>

luckSll

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
移动端个人问题总结

移动端ios与android的一些兼容问题 1.1关于滚动：为了使ios的滚动更流畅，-webkit-overflow-scrolling:touch; .scrollContainer{width: 100%;height: auto;position: absolute;top:0;bottom: 1.2r
复制链接

扫一扫