热门关键字:
jquery > jquery教程 > jquery教程 > h5 移动端开发总结

h5 移动端开发总结

433
作者:管理员
发布时间:2021/4/22 17:36:39
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Show.aspx?id=4541
  meta对于移动端的一些特殊属性,可根据需要自行设置:


  Safari (其他浏览器和 Android 均不会)上会对那些看起来像是电话号码的数字处理为电话链接:


  在高清屏下,移动端的 1px 会很粗 主要是跟一个东西有关,DPR(devicePixelRatio) 设备像素比,它是默认缩放为 100%的情况下,设备像素和 CSS 像素的比值。目前主流的屏幕 DPR=2(iPhone 8),或者 3(iPhone 8 Plus)。拿 2 倍屏来说,设备的物理像素要实现 1 像素,而 DPR=2,所以 css 像素只能是 0.5


  禁止用户选择页面中的文字或者图片


  在 iOS 上,输入框默认有内部阴影,以这样关闭:


  设置 input 里面 placeholder 字体的颜色


  设置字体禁止缩放


  部分android系统点击一个链接,会出现一个边框或者半透明灰色遮罩, 不同生产商定义出来额效果不一样


  ios 手机上下滑动页面会产生卡顿,手指离开页面,页面立即停止运动。整体表现就是滑动不流畅,没有滑动惯性。iOS 5.0 以及之后的版本,滑动有定义有两个值 auto 和 touch,默认值为 auto。


  移动设备上的web网页是有300ms延迟的,往往会造成按钮点击延迟甚至是点击失效。


  fastclick可以解决在手机上点击事件的300ms延迟zepto的touch模块,tap事件也是为了解决在click的延迟问题


  触摸事件的响应顺序


  ontouchstartontouchmoveontouchendonclick


  这个不是bug,由于自动播放网页中的音频或视频,会给用户带来一些困扰或者不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放,必须由用户来触发才可以播放。


  手指按住屏幕下拉,屏幕顶部会多出一块白色区域。手指按住屏幕上拉,底部多出一块白色区域。


  在 iOS 中,手指按住屏幕上下拖动,会触发 touchmove 事件。这个事件触发的对象是整个 webview 容器,容器自然会被拖动,剩下的部分会成空白


  将日期字符串的格式符号替换成’/’


  可以通过监听移动端软键盘弹起 Element.scrollIntoViewIfNeeded(Boolean)方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可见区域。如果该元素已经在浏览器窗口的可见区域内,则不会发生滚动。true,则元素将在其所在滚动区的可视区域中居中对齐。false,则元素将与其所在滚动区的可视区域最近的边缘对齐。根据可见区域最靠近元素的哪个边缘,元素的顶部将与可见区域的顶部边缘对准,或者元素的底部边缘将与可见区域的底部边缘对准。


  IOS 中 input 键盘事件 keyup、keydown、等支持不是很好, 用 input 监听键盘 keyup 事件,在安卓手机浏览器中没有问题,但是在 ios 手机浏览器中用输入法输入之后,并未立刻相应 keyup 事件


  定位找到问题是 fastclick.js 对 IOS12 的兼容性,可在 fastclick.js 源码或者 main.js 做以下修改


  通过监听键盘回落时间滚动到原来的位置


  软键盘唤起后,页面的 fixed 元素将失效,变成了 absolute,所以当页面超过一屏且滚动时,失效的 fixed 元素就会跟随滚动了。不仅限于 type=text 的输入框,凡是软键盘(比如时间日期选择、select 选择等等)被唤起,都会遇到同样地问题。


  解决方法: 不让页面滚动,而是让主体部分自己滚动,主体部分高度设为 100%,overflow:scroll




如果您觉得本文的内容对您的学习有所帮助:支付鼓励



关键字:jquery
友荐云推荐