正文

移动端部分兼容问题

印画  印画  2022-08-25  706

关键词：

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">

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;

移动端兼容

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面<metaname="viewport"content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>（部分安卓手机的UC浏览器写完以后还是可以放大缩小）忽略将页面中的数字... 查看详情

移动端300ms兼容问题（移动端经典问题）(代码片段)

移动端300ms延迟原因2007年初。苹果公司在发布首款iPhone前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对iPhone这种小屏幕浏览桌面端站点的问题。双击缩放(doubletaptozoom)，这... 查看详情

移动端兼容问题(代码片段)

1.华为手机自带浏览器不支持 text-decoration:underline;解决方案：varua=navigator.userAgent.toLowerCase();if(ua.match(/huawei/==‘huawei‘))$(‘.info-linka‘).css(‘border-bottom‘,‘1pxsolid‘); &n 查看详情

移动端兼容问题注意事项

1.IOS移动端click事件300ms的延迟响应移动设备上的web网页有300ms延迟，有时会造成按钮点击延迟或者点击失效。苹果为了将适用于PC端大屏幕的网页能较好的展示在手机端上，使用了双击缩放(doubletaptozoom)的方案，发布IOS系统搭载的... 查看详情

移动端兼容

移动端前端开发注意点第一次接触移动端开发，发现web端和移动端的差别还是很大的，我主要记录移动端的一些内容：移动端与web端在网页设计与交互方面的差别移动端注意点一些小技巧移动端的一些问题及解决方法移动端与web... 查看详情

关于sessionstorage的移动端兼容问题

最近在开发移动端项目时，需要用到的本地存储的地方不少。都是一些只要记住当前打开窗口的用户数据就行，所以我选择用的sessionStorage。使用场景如下：A.html页面需要记录一条数据{a:1,b:2};sessionStorage.setItem("data","{a:1,b:2}");B.htm... 查看详情

移动端常见兼容性问题及解决办法

当使用transform:translate3d(-50%,-50%,0)居中弹框（div）时，在pc端，内部的文字会模糊。解决办法：给body定义样式body{font-family:HelveticaNeue,Helvetica,PingFangSC,HiraginoSansGB,MicrosoftYaHei,SimSun,sans-serif;}用position:absolute/fixe 查看详情

移动端兼容性问题解决方案

1.IOS移动端click事件300ms的延迟响应移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效。这是由于区分单击事件和双击屏幕缩放的历史原因造成的,2007年苹果发布首款iphone上IOS系统搭载的safari为了将适... 查看详情

移动端兼容性问题解决方案

移动端常见的兼容性问题

随着手机的普及，移动端的开发也成了一个重要的方向，但由于设备的不统一会造成一些兼容性问题，1、安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研... 查看详情

html5技术教程移动端经常出现的兼容问题

移动端经常出现的兼容问题1.安卓浏览器看背景图片，有些设备会模糊因为手机分辨率太小，如果按照分辨率来显示网页，字会非常小，安卓手机devicePixoRadio比较乱，有1.5的，有2的也有3的。想让图片在手机里显示更为清晰，必... 查看详情

移动端兼容性问题解决方案

同样是微信浏览器，但是在Android平台上和iOS平台上表现还是有很大的差异，今天就遇到了诸多问题，记个笔记。使用的jQuery，一些事件监听在ios微信浏览器无效，贴出我的代码：$(document).on(‘click‘,‘[data-action="toggle"]‘,function(... 查看详情

移动端和pc端有什么区别

1.PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的... 查看详情

10-移动端开发教程-移动端事件(代码片段)

在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。1.PC端事件在移动端的兼容问题1.1click事件的200~300ms延迟问题由于移动端默认的布局视口宽度是980像素，所以... 查看详情

移动端常见的一些兼容性问题

一、meta基础知识H5页面窗口自动调整到设备宽度，并禁止用户缩放页面<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> 忽略查看详情

html5移动端最新兼容问题解决方案

1、安卓浏览器看背景图片，有些设备会模糊。用同等比例的图片在PC机上很清楚，但是手机上很模糊，原因是什么呢？经过研究，是devicePixelRatio作怪，因为手机分辨率太小，如果按照分辨率来显示网页，这样字会非常小，所以... 查看详情