移动端的坑

移动端问题,持续补充

问题: select标签和input[type="button"]在真机样式上会有区别。

解决办法: 给标签加一条样式

-webkit-appearance: none;

补充:appearance 样式用来使用以系统主题的平台样式来展示元素,在这里都设置为none,可以消除两个系统之间的样式差异,经测试在各个浏览器这个属性差异还是很大的(pc端)

问题:ios 不支持 new Date(yyyy-mm-dd)

解决办法: 分隔符用 /

补充: safari 浏览器不支持yyyy-mm-dd 格式的日期字符串

问题: ios 滚动元素滚动不流畅

解决办法: 添加css样式

webkit-overflow-scrolling: touch;

补充:** -webkit-overflow-scrolling ** 用来控制触摸设备在给定的元素之上是否使用动能模拟的滚动,<span style="color: red">这个特性不是标准的属性。不同的用户使用效果不一样,也会根据浏览器的实现而有差异,同时在将来的版本中会出现不可预料的变化</span>,有两个取值

  • auto 普通滚动。 当你手指离开会立即停止滚动
  • touch 使用动能模拟滚动,手指离开会根据离开时的速度和手势来继续滚动或停止

参考

关于移动端踩过的坑

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • mobileHack 这里收集了许多移动端上遇到的各种坑与相对解决方案 工具类网站 HTML5 与 CSS3 技术...
    Zoemings阅读 11,578评论 0 12
  • 1.关于微信手机端IOS系统中input输入框无法输入的问题 把-webkit-user-select:none改...
    8d2855a6c5d0阅读 1,248评论 0 1
  • 1、移动端定位最好不要用fixed,用绝对定位absolute。2、移动端会有点透BUG,需要touchstart...
    我是走A牧阅读 2,828评论 0 1
  • Mobile Web Favorites 参与贡献 移动前端开发收藏夹,欢迎使用Issues以及 Pull Req...
    柴东啊阅读 4,223评论 0 2
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 28,047评论 1 45