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

最新推荐文章于 2022-10-11 10:09:05 发布

倚窗听梦~~~

最新推荐文章于 2022-10-11 10:09:05 发布

阅读量1.8k

点赞数 1

本文链接：https://blog.youkuaiyun.com/weixin_45343884/article/details/101063370

版权

本文详细列举并解答了移动端开发中遇到的苹果与安卓设备的适配问题，包括电话号码自动识别、页面字体大小、文本选中、图片保存、输入框光标位移、input样式、页面缩放、点击延迟、邮箱识别以及滚动卡顿等，提供了一系列解决方案，如使用CSS3属性text-size-adjust、-webkit-overflow-scrolling和appearance等进行样式初始化和问题修复。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

常见苹果适配问题：

【问题1】：iPhone页面会自动把数字当成电话号码，点击后自动跳到电话拨号界面
♥♥♥方案：<meta name="format-detection" content="telephone=no" />

【问题2】微信浏览器自动调整页面字体大小
♥♥♥方案：禁止微信浏览器调整页面字体大小:

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

【问题3】用户随意选中页面文字及图片
♥♥♥方案：如无文本选中需求，此为必选项

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

【问题4】iPhone长按图片保存图片弹窗
♥♥♥方案：关闭长按图片保存图片弹窗

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

【问题5】 iPhone输入框的光标发生位移，上移或者下移
♥♥♥方案：不要设置line-height即可

【问题6】苹果手机上的input按钮自带渐变效果
♥♥♥方案：加上outline:0px; -webkit-appearance:none; 清除原有样式，同时苹果手机上的input按钮自带圆角需要按需要去掉.

		<style type="text/css">
			input[type=button],input[type=reset],input[type=submit]{
				resize: none;
				border: none;
				outline: none;
				/*appearance允许使元素看上去像标准的用户界面元素*/
				-webkit-appearance: none;
				border-radius: 0;
			}
		</style>

【问题7】表单input元素获取焦点时页面被放大

–表现：在iPhone上点击input框会有一个动画效果，这是苹果公司默认设置的，每次input获取焦点都会使页面放大，效果非常不好看
♥♥♥方案：–加入meta标记-------user-scalable改为no即可

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

【问题8】iPhone移动端input 无法获取焦点

原因：在移动端开发中，我们有时有针对性的写一些特殊的重置，在整个项目之中有一个需求，禁止用户进行复制.选择.，于是写了这样的代码 -webkit-user-select: none;影响到了input获取焦点。

♥♥♥方案：**把-webkit-user-select:none改成-webkit-user-select:auto;**覆盖掉或者直接注释掉就行，如果项目需要，就不用注释了。

【问题9】360浏览器兼容模式打开项目无法正常浏览

场景表现：自己写完项目在各个浏览器检查时，并没有问题，当项目给到后台同事的时候，在他们的电脑上用360浏览器兼容模式打开项目，出现不兼容的问题。
同事的电脑安装的同样都是同一版本的360浏览器。最后，经过查阅资料发现，360兼容模式出现的兼容问题，实质还是IE的兼容问题，同时，每个电脑内置的IE版本是不一样的，开发时电脑内置IE的版本高，而同事的版本低导致出现渲染页面时出现问题。
♥♥♥方案：.0<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>

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

【问题10】移动端click事件延迟300ms
------问题由来：
1、这要追溯至 2007 年初。苹果公司在发布首款 iPhone 前夕，遇到一个问题：当时的网站都是为大屏幕设备所设计的。于是苹果的工程师们做了一些约定，应对 iPho