移动web开发问题和经验总结

MorePainMoreGain 发布于2019-08-02 16:02 / 1952人阅读

摘要：的事件默认绑在上的抓包浏览器连接安卓机测试实用网站适配测试兼容性网站前端开发雅虎条优化准则

前言

这里大部分是自己遇到过的情况，还有一部分借鉴了同行的文章，如果大家有遇到其它坑，欢迎提出来一起研究。

知识要点 1. Meta标签

1.禁止用户缩放页面，页面强制让文档的宽度与设备的宽度保持1:1

2.禁止ios上自动识别电话

3.禁止android上自动识别邮箱

4.针对ios上的safari上地址栏和顶端样式条的

2. JS和jquery获取各种屏幕的宽度和高度的代码

// Javascript:
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth

// Jquery：
$(document).ready(function(){
　　alert($(window).height()); //浏览器当前窗口可视区域高度
　　alert($(document).height()); //浏览器当前窗口文档的高度
　　alert($(document.body).height());//浏览器当前窗口文档body的高度
　　alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding margin
　　alert($(window).width()); //浏览器当前窗口可视区域宽度
　　alert($(document).width());//浏览器当前窗口文档对象宽度
　　alert($(document.body).width());//浏览器当前窗口文档body的宽度
　　alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin
})

3. 打电话发短信

打电话给:020-88888888
发短信给: 911

4. 图片优化

1.base64编码图片替换url图片;

2.图片压缩，提供一个网站用于压缩;

3.图片懒加载；

4.img和background

img：html中的标签img是网页结构的一部分会在加载结构的过程中和其他标签一起加载；

background：以css背景图存在的图片background会等到结构加载完成（网页的内容全部显示以后）才开始加载；

so，网页会先加载标签img的内容，再加载背景图片background引用的图片

5. H5禁止手机屏幕横屏的变相操作

移动设备上的页面，当屏幕旋转的时候会有一个orientationchange事件，可以给body元素增加此事件的监听：

进入监听方法中，通过window。orientation来获取当前屏幕的状态：

0 --- 竖屏

90 --- 逆时针旋转横屏

-90 --- 顺时针旋转横屏

180 --- 竖屏，上下颠倒

解决方法：

1.你可以在设备旋转时间监听里面对body使用CSS3里面的transition中的旋转来保持页面竖向；

2.此方法只适用于安卓手机

技巧与必知 1. 原生js的事件监听和jquery的事件绑定在ios中失效：

使用事件监听或事件绑定时，由于父元素选择body或document元素，导致在ios中事件触发无效，所以不使用body和document元素作为父级元素。

2. navigator.onLine兼容性问题，需谨慎使用； 3. ios中日期显示为NaN：

Date的日期格式，在ios中有兼容性问题，ios的日期会显示成：NaN;

解决方法：在ios中支持"2017/12/26 19:36:00"，而不支持"2017-12-26 19:36:00"格式，后面一种格式，在ios中显示Nan （Android中都可以显示正常）

4. 移动端1px的问题:

由于不同的手机有不同的像素密度,css中的1px并不等于移动设备的1px。项目中使用js和rem做移动端的屏幕适配，所以产生0.5px的情况，导致低版本的手机展示不了0.5px的边框。

解决方法：使用css解决1px的问题，并且给需要设置成1px的dom元素直接写上：border-width:1px;

5. 页面滚动条问题：

web页面在PC浏览器上浏览时有滚动条；但是，在移动端浏览器打开时，没有滚动条

解决方法：将页面的最外层(我一般在写页面时，会在body标签内写一个大容器，用于存放页面的内容)设置overflow:auto/scroll;并且不能设置height属性的值(height:100%也不行)

6. 长按闪退的问题:

列表页的列表项时(触摸到文字)，在低版本手机中会出现闪退的情况

解决方法：

js部分：在事件触发时添加e.preventDefault();，用于阻止默认行为
css部分：添加禁止文本文本复制的代码 -webkit-touch-callout: none; user-select: none;

7. ios中，除body外的局部滚动，会出现卡顿问题

解决方案：在要滚动元素上加上

-webkit-overflow-scrolling: touch;
overflow-scrolling: touch;

8. 在ios上，input默认样式和表单的disabled属性带来的重影样式

1.去掉input的默认样式

input,button,textarea{-webkit-appearance: none;}

2.因为ios默认了disabled属性时透明度为0.8，解决：

input:disabled, input[disabled]{ -webkit-opacity:1; opacity: 1; }

9. 慎用fixed布局

css中position: fixed定位会因为其父元素上可能设置了transform属性而失效。

微信端 1. 安卓在微信端不能使用window.location.reload()

解决方法：使用url地址后加随机数来解决

2. ios下的微信页面背景音乐无法自动播放问题

这个问题我有遇到过，然后网上了找了解决方法，但是没有效果，所以只能改用开始移动播放音乐。

Other

zepto的scroll事件默认绑在window上的

app抓包

浏览器连接安卓机测试

实用网站

flexible适配

测试兼容性网站

前端开发

雅虎36条优化准则

超融合服务器服务器托管经验总结服务器迁移经验总结移动web开发简单的web开发问题

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/54542.html

移动web开发问题和经验总结

摘要：的事件默认绑在上的抓包浏览器连接安卓机测试实用网站适配测试兼容性网站前端开发雅虎条优化准则前言这里大部分是自己遇到过的情况，还有一部分借鉴了同行的文章，如果大家有遇到其它坑，欢迎提出来一起研究。知识要点 1. Meta标签 1.禁止用户缩放页面，页面强制让文档的宽度与设备的宽度保持1:1 2.禁止ios上自动识别电话 3.禁止android上自动识别邮箱 4.针对ios上的...

yexiaobai 2019-08-30 14:14 评论0 收藏0
移动web开发问题和经验总结

摘要：的事件默认绑在上的抓包浏览器连接安卓机测试实用网站适配测试兼容性网站前端开发雅虎条优化准则前言这里大部分是自己遇到过的情况，还有一部分借鉴了同行的文章，如果大家有遇到其它坑，欢迎提出来一起研究。知识要点 1. Meta标签 1.禁止用户缩放页面，页面强制让文档的宽度与设备的宽度保持1:1 2.禁止ios上自动识别电话 3.禁止android上自动识别邮箱 4.针对ios上的...

Wildcard 2019-08-22 15:44 评论0 收藏0
移动web开发问题和经验总结

摘要：的事件默认绑在上的抓包浏览器连接安卓机测试实用网站适配测试兼容性网站前端开发雅虎条优化准则前言这里大部分是自己遇到过的情况，还有一部分借鉴了同行的文章，如果大家有遇到其它坑，欢迎提出来一起研究。知识要点 1. Meta标签 1.禁止用户缩放页面，页面强制让文档的宽度与设备的宽度保持1:1 2.禁止ios上自动识别电话 3.禁止android上自动识别邮箱 4.针对ios上的...

lwx12525 2019-08-05 13:20 评论0 收藏0
前端每周清单半年盘点之 React 与 ReactNative 篇

摘要：前端每周清单半年盘点之与篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点分为新闻热点开发教程工程实践深度阅读开源项目巅峰人生等栏目。与求同存异近日，宣布将的构建工具由迁移到，引发了很多开发者的讨论。前端每周清单半年盘点之 React 与 ReactNative 篇前端每周清单专注前端领域内容，以对外文资料的搜集为主，帮助开发者了解一周前端热点；分为...

Barry_Ng 2019-08-22 10:54 评论0 收藏0
3年软件测试经验突显迷茫...不知道我这种测试人员是不是被淘汰？

这两天和朋友谈到软件测试的发展：这一行的变化确实蛮大，从开始最基础的功能测试，到现在自动化、性能、安全乃至于以后可能出现的大数据测试、AI测试岗位需求逐渐增多。我也在软件测试这行摸爬滚打了十年了，正好有朋友问我：如何快速成为互联网时代优秀的测试工程师呢？趁着最近终于有了些闲余时间，遂总结了下自动化测试的成长线路图和职业必备技能，希望可以帮助各位少走弯路、破茧成蝶、迈向成功。下面我来分享下自动化测...

fasss 2021-11-15 11:38 评论0 收藏0