前端开发总结(移动篇)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了前端开发总结(移动篇)相关的知识,希望对你有一定的参考价值。

注意:Chrome模拟手机的显示的界面是有误差的,强烈建议一定要在真机测试自己的移动端页面。

 

1.页面高度渲染错误,页面的高度是否包含了导航,(华为手机就是偏偏有底部菜单)

设置窗口高度document.documentElement.style.height = window.innerHeight + ‘px‘; 


2.移动端背景图缩放固定。

采用fixed布局,zoom属性为1。

 

3.文本行高偏上不对齐。

设置line-height设置成normal。不要写死行高值。

 

Iphone的兼容问题:

1.:active伪类不生效

阻止touchstart默认事件。(如果没有什么手势事件的需求的话,最好全部禁止手势事件)

 

2.input=“search”无法触发输入法。

需要<form>标签包起来才能触发。

 

3.禁用长按事件。

慎用user-select:none;属性,会导致无法iphone无法输入。

 

4.webview回弹效果。

如果页面是全屏,不超过可视高度的话,建议禁用touchmove事件。

如果页面不是全屏,超过可视高度的话,就不要禁用touchmove事件。

 

PS:虽然有办法阻挡X5内核(QQ浏览器内核)的“网页有XXX提供”的这些信息,但是并没有真正阻挡iphone的回弹效果。拖拽还是会回弹。

 


以上是关于前端开发总结(移动篇)的主要内容,如果未能解决你的问题,请参考以下文章

移动端前端开发的知识点总结

移动前端开发总结

前端(移动端)开发总结

前端开发知识之前端移动端适配总结

移动端 h5开发相关内容总结——CSS篇

前端开发——移动端及响应式布局解决办法总结(适配)