CSS3--移动端苹果安卓适配

深碍√TFBOYSˉ_ 2024-04-19 15:28 63阅读 0赞

# （一）meta元标签 #

##### 一、iPhone页面会自动把数字当成电话号码，点击后自动跳到电话拨号界面 #####

**解决方案**：禁止手机自动将网页中的电话号码显示为拨号的超链接

##### 二、微信浏览器自动调整页面字体大小 #####

**解决方案**：禁止微信浏览器调整页面字体大小

body{
    			-webkit-text-size-adjust: 100% !important;
    		}

##### 三、用户随意选中页面文字及图片 #####

**解决方案**：如无文本选中需求，此为必选项

body{
    			-webkit-user-select: none;
    		}

##### 四、iPhone长按图片保存图片弹窗 #####

**解决方案**：关闭长按图片保存弹窗

img{
    			-webkit-touch-callout: none;
    		}

##### 五、iPhone输入框的光标发生位移，上移或者下移 #####

**解决方案**：不要设置line-height即可

##### 六、苹果手机上的input按钮自带渐变效果 #####

**解决方案**：加上outline:0px; -webkit-appearance:none; 清除原有样式，同时苹果手机上的input按钮自带圆角需要按需要去掉

input[type=button],input[type=reset],input[type=submit]{
    			resize: none;
    			border: none;
    			outline: none;/*去除自带轮廓线*/
    			-webkit-appearance: none;
    			/*appearance允许使元素看上去像标准的用户界面元素*/
    			border-radius: 0;
    		}

##### 七、表单input元素获取焦点时页面被放大 #####

表现：在iPhone上点击input框会有一个动画效果，这是苹果公司默认设置的，每次input获取焦点都会使页面放大，效果非常不好看  
**解决方案**：

##### 八、iPhone移动端input 无法获取焦点 #####

**原因**：在移动端开发中，我们有时有针对性的写一些特殊的重置，在整个项目之中有一个需求，禁止用户进行复制.选择.，于是写了这样的代码 -webkit-user-select: none;影响到了input获取焦点。  
**解决方案**：把`-webkit-user-select:none`改成`-webkit-user-select:auto;`覆盖掉或者直接注释掉就行，如果项目需要，就不用注释了。

##### 九、360浏览器兼容模式打开项目无法正常浏览 #####

**场景表现**：自己写完项目在各个浏览器检查时，并没有问题，当项目给到后台同事的时候，在他们的电脑上用360浏览器兼容模式打开项目，出现不兼容的问题。  
同事的电脑安装的同样都是同一版本的360浏览器。最后，经过查阅资料发现，360兼容模式出现的兼容问题，实质还是IE的兼容问题，同时，每个电脑内置的IE版本是不一样的，开发时电脑内置IE的版本高，而同事的版本低导致出现渲染页面时出现问题。  
**解决方案**：

**原理**：http-equiv=“X-UA-Compatible” 这是一个文档兼容模式的定义， Edge模式告诉IE以最高级 模式渲染文档，也就是任何IE版本都以当前版本所支持的最高级标准模式渲染，避免版本升级造成的影响。这句代码可以改变360兼容模式下以何种版本的IE去渲染页面。

##### 十、不让Android手机识别邮箱 #####

**解决方案**：告诉设备不识别邮箱，点击之后不自动发送

##### 十一、上下拉动滚动条时卡顿、慢 #####

**解决方案**：

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

##### 十二、meta元标签补充 #####

<head>
    		<meta charset="utf-8" />
    		
    		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    		
    		<meta name="author" content="作者、昵称、代号等"/>
    		
    		<meta name="description" content="本网站为...类型网站，主要服务对象为..."/>
    		
    		<meta name="keywords" content=""/>
    		
    		<meta name="msapplication-tap-highlight" content="no"/>
    		
    		
    		<meta name="format-detection" content="telephone=no"/>
    		
    		<meta name="format-detection" content="email=no"/>
    		
    		<meta name="format-detection" content="adress=no"/>
    		
    		<meta name="screen-orientation" content="portrait"/>
    		
    		<meta name="x5-fullscreen" content="true"/>
    		
    		<meta http-equiv="X-UA-Compatible" content="IE=Edeg,chrome=1" />
    		
    		<title>登录</title>
    		
    		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
    		
    		<link rel="stylesheet" type="text/css" href="css/deng_lu.css"/>
    		
    		<script type="text/javascript" src="js/flexible.js"></script>
    		
    		<script type="text/javascript" src="js/fastclick.js"></script>
    		
    		<script type="text/javascript">
    			if('addeventLinster' in document){ 
    				document.addEventListener("DOMContentLoaded",function(){ 
    					FontFaceList.attach(document.body);
    				},false);
    			}
    		</script>
    	</head>

# （二）移动端300ms点击延迟 #

##### 一、移动端click事件延迟300ms #####

**场景**：一般情况下，如果没有经过特殊处理，移动端浏览器在派发点击事件的时候，通常会出现300ms左右的延迟。也就是说，当我们点击页面的时候移动端浏览器并不是立即作出反应，而是会等上一小会儿才会出现点击的效果。  
在移动WEB兴起的初期，用户对300ms的延迟感觉不明显。但是，随着用户对交互体验的要求越来越高，现今，移动端300ms的点击延迟逐渐变得明显而无法忍受。  
【由来】：那么，移动端300ms的点击延迟是怎么来的呢？

> 问题由来：  
> 1、这要追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPhone 这种**小屏幕浏览桌面端站点**的问题。  
> 这当中最出名的，当属双击缩放(double tap to zoom)，这也是会有上述 300 毫秒延迟的主要原因。双击缩放，顾名思义，即用手指在屏幕上快速点击两次，iOS 自带的 Safari 浏览器会将网页缩放至原始比例。  
> 那么这和 300 毫秒延迟有什么联系呢？  
> 2、假定这么一个场景。用户在 iOS Safari 里边点击了一个链接。由于用户可以进行双击缩放或者双击滚动的操作，当用户一次点击屏幕之后，浏览器并不能立刻判断用户是确实要打开这个链接，还是想要进行双击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击屏幕。  
> 鉴于iPhone的成功，其他移动浏览器都复制了 iPhone Safari 浏览器的多数约定，包括双击缩放，几乎现在所有的移动端浏览器都有这个功能。之前人们刚刚接触移动端的页面，在欣喜的时候往往不会care这个300ms的延时问题，可是如今touch端界面如雨后春笋，用户对体验的要求也更高，这300ms带来的卡顿慢慢变得让人难以接受。

**解决方案**：  
（1）**禁用缩放**

关键是 `user-scalable = no`，这个属于简单粗暴型的，虽然看似完美，但有一个致命的缺陷，当你必须完全禁用缩放来达到目的时候，就傻眼了，只有特定场景下的交互界面，此方案才可行，其它大多数情况，此法都不可行。

（2）**FastClick插件**

*  FastClick是FT Labs专门为解决移动端浏览器 300 毫秒点击延迟问题所开发的一个轻量级的库。简而言之，FastClick 在检测到 touchend 事件的时候，会通过 DOM 自定义事件立即触发一个模拟 click 事件，并把浏览器在 300 毫秒之后真正触发的click事件阻止掉。
 *  当 FastClick 检测到当前页面使用meta设置了user-scalable=no或者 touch-action 属性的解决方案时，会静默退出。可以说，这是真正的跨平台方案出来之前一种很好的变通方案。就目前而言，FastClick 非常实际地解决 300 毫秒点击延迟的问题。  
    **用法**：  
    引入脚本：引入插件的js文件到HTML网页中，脚本必须加载到实例化fastclick在页面的任何元素之前

如果使用了jquery插件，可以这样编写：

（3）**JS库jQuery电脑端和zepto.js移动端等js库的tap触屏事件**（不推荐使用）

# 布局问题 #

##### 布局使用display弹性自适应 #####

内容排版布局显示，尽量少使用float，建议使用display的box、flex等（多栏）自适应布局，优点表现在以下几个反面：

*  独立的高度控制与对齐
 *  独立的元素顺序
 *  指定元素之间的关系
 *  灵活的尺寸和对齐方式

# 禁止选择 #

**场景**：  
当你希望页面上的文字或者图片不被用户选择时候亦或者禁止长按保存图片时，可以使用这个方法来实现。是不是很方便的说，但注意的是不可滥用，否则会出现一些无法输入或者点击的情况。  
**解决方案**：

a,img{
    		-webkit-touch-callout: none;
    		/*禁止长按链接与图片弹出菜单*/
    	}
    	html,body{
    		-webkit-user-select: none;
    		/*禁止选中文本(如无文本选中需求,此为必选项)*/
    		-moz-user-select: none;
    		-ms-user-select: none;
    	}