移动端兼容问题----总结

1、H5页面窗口自动调整到设备宽度,并禁止用户缩放页面
  <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

  (部分安卓手机的UC浏览器写完以后还是可以放大缩小)。

2、略将页面中的数字识别为电话号码
  <meta name="format-detection" content="telephone=no" />(iOS上会明显 有时候会把数字当成电话号码)

3、忽略Android平台中对邮箱地址的识别
  <meta name="format-detection" content="email=no" />

4、viewport模板
  <meta charset="utf-8">

  <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">

  <meta content="yes" name="apple-mobile-web-app-capable">

  <meta content="black" name="apple-mobile-web-app-status-bar-style">

  <meta content="telephone=no" name="format-detection">

  <meta content="email=no" name="format-detection">

5、webkit表单元素的默认外观怎么重置
  .css{-webkit-appearance:none;} (ios上的下拉框会有圆角,所以要写border-radius:0)

6、在input框获得焦点时文字被清空用value 在input框输入文字时被清空用placeholder

  webkit表单输入框placeholder的文字能换行么?ios可以,android不行~,在textarea标签下都可以换行~

  html,body{

  overflow: hidden;/*手机上写overflow-x:hidden;会有兼容性问题,如果子级如果是绝对定位有运动到屏幕外的话ios7系统会出现留白*/

  -webkit-overflow-scrolling:touch;/*流畅滚动,ios7下会有滑一下滑不动的情况,所以需要写上*/

  position:realtive;/*直接子级如果是绝对定位有运动到屏幕外的话,会出现留白*/

  }。

7、手机上的flex布局时会有兼容性问题,只用新版本的会出现安卓手机不识别的现象

  .box{

  display: -webkit-box; /* 老版本语法: Safari, iOS, Android browser, older WebKit browsers. */

  display: -moz-box; /* 老版本语法: Firefox (buggy) */

  display: -ms-flexbox; /* 混合版本语法: IE 10 */

  display: -webkit-flex; /* 新版本语法: Chrome 21+ */

  display: flex; /* 新版本语法: Opera 12.1, Firefox 22+ */

  }

  .box>li{

  -webkit-box-flex: 1.0;

  box-flex: 1.0;

  -webkit-flex: 1.0;

  flex: 1;

  width: 0;/*解决兼容性问题*/

  }

8、输入框的兼容性解决

  input[type="text"],

  input[type="date"],

  input[type="tel"],

  input[type="email"],

  input[type="password"]{

  -webkit-appearance: none;

  display: block;

  width: 100%;

  height: 0.8rem;

  line-height:normal;/*手机上的line-height不能写成和height的值一样,会出现再次输入光标靠上的现象*/

  background: none;

  font-size: 0.32rem;

  padding-left: 0.28rem;

  border-radius: 0;

  -webkit-border-radius: 0;

  border: 1px solid #d5d5d5;

  -moz-box-sizing: border-box;

  -webkit-box-sizing: border-box;

  box-sizing: border-box;

  outline: none;

  -webkit-transform: translateZ(0);

  -moz-transform: translateZ(0);

  -ms-transform: translateZ(0);

  -o-transform: translateZ(0);

  transform: translateZ(0);/*解决加入js后input框输入瞬间变白的现象*/

  }

9、禁用 radio 和 checkbox 默认样式

  input[type="radio"]::-ms-check,input[type="checkbox"]::-ms-check{

  display: none;/*这样就可以用class自定义样式*/

  }

10、webkit表单输入框placeholder的颜色值

  input::-webkit-input-placeholder{color:#999;}

  input:focus::-webkit-input-placeholder{color:#999;}

11、手机上的多行省略

  .overflow-hidden{

  display: box !important;

  display: -webkit-box !important;

  overflow: hidden;

  text-overflow: ellipsis;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 4;/*第几行出现省略号*/

  /*text-align:justify;不能和溢出隐藏的代码一起写,会有bug*/

  }

12、文本标签line-height:1或者是line-height等于height文字会被切掉

  手机上浮动元素能写宽尽量写宽不然很容易出现兼容性问题,尽量不要写高,因为内容多少不固定

给不同屏幕大小的手机设置特殊样式

  @media only screen and (min-device-width : 320px) and (max-device-width : 375px){}

13、<button></button>元素一定要写上type属性不然会默认提交表单,出现想不到的bug

14、某些安卓手机的自带浏览器不识别onkeydown onkeypress onkeyup事件,这些事件会导致不能输入汉字

15、input框若是不想输入文字 只能读不能写可以加readonly属性

16、手机上用背景图写运动

  如果需要背景图定位来实现运动效果可以用rem进行计算后加上basckground-size:图的个数*100% 0;

   写背景图时最好加上top left 或者0 0 不然写运动效果时容易出现跳

17、弹层的关闭事件

  弹层的关闭事件容易触发弹层关闭后下一层的事件所以要给弹层关闭事件加上event.preventDefault()

  弹层弹出后不允许屏幕滚动给弹层加mousemove事件event.preventDefault()

18、面包屑导航

  面包屑导航如果按照bootstrap给li加:after伪元素的话在其他浏览器和在UC浏览器中表现的不一样,UC的的会比其他的浏览器宽,所占位置更多

  如果一个手机看到的和其他手机不一样 会比其他的手机大或者小,查看他的浏览器字体设置是否正常,应该是他把手机浏览的字号调小或者调大了(坑人的所谓的bug)

  IOS手机中如果出现一个元素的层级非常高可还是被别的元素遮盖的,那么就将该元素与别的元素同级

19、苹果手机固定定位有bug 检查html和body是不是设置了overflow-x:hidden;

时间: 2024-10-07 10:55:39

移动端兼容问题----总结的相关文章

【移动端兼容问题研究】javascript事件机制详解(涉及移动兼容)--转

前言 javascript事件基础 事件捕获/冒泡 事件对象 事件模拟 移动端响应速度 PC与移动端鼠标事件差异 touch与click响应速度问题 结论 zepto事件机制 注册/注销事件 zepto模拟tap事件 tap事件的问题一览 点透问题 fastclick思想提升点击响应 实现原理 鬼点击 ios与android鼠标事件差异 事件捕获解决鬼点击 结语 前言 这篇博客有点长,如果你是高手请您读一读,能对其中的一些误点提出来,以免我误人子弟,并且帮助我提高 如果你是javascript菜

video移动端兼容问题

video在各版本ios和安卓上面表现形式都有所区别,为了解决这一问题我在网上找了许多方法,看见甚至有采取重写控件的方式来解决,这里亲自尝试了一下,提供一个简单而又能解决大部分移动端兼容的方式: 给video加上 webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow" <video id="mpVideo&q

移动端兼容问题注意事项

1. IOS移动端click事件300ms的延迟响应 移动设备上的web网页有300ms延迟,有时会造成按钮点击延迟或者点击失效. 苹果为了将适用于PC端大屏幕的网页能较好的展示在手机端上,使用了双击缩放(double tap to zoom)的方案,发布IOS系统搭载的safari.如:在手机上用浏览器打开一个PC的网页,你可能在看到页面内容虽然可以撑满整个屏幕,但是字体.图片都很小看不清,此时可以快速双击屏幕上的某一部分,你就能看清该部分放大后的内容,再次双击后能回到原始状态. 双击缩放:用

web移动端兼容

移动端总结和手机兼容问题 H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> (部分安卓手机的UC浏览器写完以后还是可以放大缩小) 忽略将页面中的数字识别为电话号码 <meta name="f

服务端兼容多个不同APP版本

1.实现目标 发布第N版APP,不影响N版本之前APP的正常使用,不强制用户升级APP版本,兼容多个版本的APP的正常使用. 2.解决思路 服务端维护不同版本APP的api(例如版本参数 v1.v2.v3-),根据手机端传递的URL及版本信息,动态调用对应的api. 3.常见的方案 3.1 常见的URL请求传递版本信息的4中方式 url+版本参数: www.xxx.com/api.xxx?version=v1 www.xxx.com/sys/user/getUserByName?version=

select标签移动端兼容

select选中事件用change,(用click会执行两次): select标签对移动端的兼容: .custom-selectselect{ width:100%; margin:0; background:none; border:1px solid transparent; outline: none;/* Prefixed box-sizing rules necessary for older browsers */ -webkit-box-sizing: border-box; -m

关于sessionStorage的移动端兼容问题

最近在开发移动端项目时,需要用到的本地存储的地方不少.都是一些只要记住当前打开窗口的用户数据就行,所以我选择用的sessionStorage.使用场景如下: A.html页面需要记录一条数据{a:1,b:2}; sessionStorage.setItem("data","{a:1,b:2}"); B.html页面取出使用; sessionStorage.getItem("data"); // 获取结果为null 问题:如果项目不是单页面复应用,

移动端兼容小计

1.页面布局: 由于手机型号多样导致页面高宽比非常多,在制作上会有出现不同手机在同一套css下面显示效果不尽如人意,所以需要进行兼容性处理. 方式很多比如直接套用类似bootstrap类的框架,可以使用rem等相对单位.这里我主要使用的是媒体查询和vw和vh单位和百分比来进行处理. 100vw为整个屏幕的宽度,100vh为屏幕高度,其实和百分比的做法很相似,只不过把计算的值单位换成vw或者vh. 2.碰到的兼容问题,主要是ios: a.ios: optgroup使用会出现select的选择文本靠

淘宝移动端兼容

js控制分辨率等比例缩放 var scale = 1 / devicePixelRatio; document.querySelector('meta[name="viewport"]').setAttribute('content','initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no'); 淘宝布局的第二个要点,就是html元素