ios和android 浏览器适配问题总结

Posted 2023-03-14

参考技术A 移动端、 适配（兼容）、 ios点击事件300ms延迟、 点击穿透、 定位失效......

关于Web移动端Fixed布局的解决方案，这篇文章也不错 http://efe.baidu.com/blog/mobile-fixed-layout/

详细介绍见这里： https://developer.mozilla.org/zh-CN/docs/Web/CSS/pointer-events

一篇文章有详细介绍，地址： http://www.jb51.net/post/phone_web_ysk

//问题一解决，我目前用的是js。如下

//问题二，是因为form提交默认做了表单验证，step默认是1,要设置step属性，假如保留2位小数，写法如下：
<input type="number"step="0.01"/>
关于step，我在这里做简单的介绍，input 中type=number，一般会自动生成一个上下箭头，点击上箭头默认增加一个step，点击下箭头默认会减少一个step。number中默认step是1。也就是step=0.01,可以允许输入2位小数，并且点击上下箭头分别增加0.01和减少0.01。
假如step和min一起使用，那么数值必须在min和max之间。
看下面的例子：
<input type="number"step="3.1"min="1"/>
输入框可以输入哪些数字？
首先，最小值是1，那么可以输入1.0，第二个是可以输入（1+3.1）那就是4.1,以此类推，每次点击上下箭头都会增加或者减少3.1，输入其他数字无效。这就是step的简单介绍。
//问题三，去除input默认样式

解决方式如下：

设置如下：

可以设置如下：

iOS 浏览器横屏时会重置字体大小，设置 text-size-adjust 为 none 可以解决 iOS 上的问题，
但桌面版 Safari 的字体缩放功能会失效，因此最佳方案是将 text-size-adjust 为 100% 。

这个不是 BUG，由于自动播放网页中的音频或视频，会给用户带来一些困扰或者不必要的流量消耗，所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放，必须由用户来触发才可以播放。
解决方法思路：先通过用户 touchstart 触碰，触发播放并暂停（音频开始加载，后面用 JS 再操作就没问题了）。

这个我感觉没有什么好的解决方案，用如下方法

有些机型的搜索input控件会自带close按钮（一个伪元素），而通常为了兼容所有浏览器，我们会自己实现一个，此时去掉原生close按钮的方法为:

如果想使用原生close按钮，又想使其符合设计风格，可以对这个伪元素的样式进行修改。

//zepto方式: