前言

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

知识要点

1. Meta标签

  • 1.禁止用户缩放页面,页面强制让文档的宽度与设备的宽度保持1:1
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
  • 2.禁止ios上自动识别电话
<meta content="telephone=no" name="format-detection" />
  • 3.禁止android上自动识别邮箱
<meta content="email=no" name="format-detection" />
  • 4.针对ios上的safari上地址栏和顶端样式条的
<meta name="apple-mobile-web-app-capable" content="yes" /><!-- 听说在ios7以上版本就没效果了 -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" /><!-- 可选default、black、black-translucent 但是我都是用black-->

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. 打电话发短信

<a href="tel:020-88888888">打电话给:020-88888888</a>
<a href="sms:911">发短信给: 911</a>

4. 图片优化

  • 1.base64编码图片替换url图片;
  • 2.图片压缩,提供一个网站用于压缩;
  • 3.图片懒加载;
  • 4.img和background

    • img:html中的标签img是网页结构的一部分会在加载结构的过程中和其他标签一起加载;
    • background:以css背景图存在的图片background会等到结构加载完成(网页的内容全部显示以后)才开始加载;
so,网页会先加载标签img的内容,再加载背景图片background引用的图片

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

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

<body onOrientationchange="updateOrientation();"> 

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

  • 0 --- 竖屏
  • 90 --- 逆时针旋转横屏
  • -90 --- 顺时针旋转横屏
  • 180 --- 竖屏,上下颠倒

解决方法:

  • 1.你可以在设备旋转时间监听里面对body使用CSS3里面的transition中的旋转来保持页面竖向;
  • 2.此方法只适用于安卓手机
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">

技巧与必知

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

  1. zepto的scroll事件默认绑在window上的
  2. app抓包
  3. 浏览器连接安卓机测试

实用网站

  1. flexible适配
  2. 测试兼容性网站
  3. 前端开发
  4. 雅虎36条优化准则

移动web开发问题和经验总结的更多相关文章

  1. SpringMVC内容略多 有用 熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器、过滤器等Web组件以及MVC架构模式进行Java Web项目开发的经验。

    熟悉基于JSP和Servlet的Java Web开发,对Servlet和JSP的工作原理和生命周期有深入了解,熟练的使用JSTL和EL编写无脚本动态页面,有使用监听器.过滤器等Web组件以及MVC架构 ...

  2. 【初码干货】使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践

    提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OS ...

  3. Hybrid APP混合开发的一些经验和总结

    http://www.cnblogs.com/kingplus/p/5588339.html 写在前面: 由于业务需要,接触到一个Hybrid APP混合开发的项目.当时是第一次接触混合开发,有一些经 ...

  4. 转载:移动web开发规范

    本文来源:http://blog.csdn.net/joueu/article/details/44329825 以下是规范建议,均是日常在开发当中的的一些经验,仅供参考. 移动web开发规范 一.头 ...

  5. [Python] 利用Django进行Web开发系列(二)

    1 编写第一个静态页面——Hello world页面 在上一篇博客<[Python] 利用Django进行Web开发系列(一)>中,我们创建了自己的目录mysite. Step1:创建视图 ...

  6. 超全的web开发工具和资源

    首页 新闻 产品 地图 动态 城市 帮助 论坛 关于 登录 注册 · 不忘初心,继续前进,环境云V2接口正式上线 · 环境云测点地图全新改版 · 祝福各位环境云用户中秋快乐!   平台信息 培训互动 ...

  7. Web API接口设计经验总结

    在Web API接口的开发过程中,我们可能会碰到各种各样的问题,我在前面两篇随笔<Web API应用架构在Winform混合框架中的应用(1)>.<Web API应用架构在Winfo ...

  8. 【今日推荐】移动 Web 开发的10个最佳 JavaScript 框架

    选择正确的 JavaScript 框架,对于开发移动 Web 应用程序是至关重要的,也是移动应用程序开发的一项重要任务.开发人员可以使用框架实现的功能高效地达到他们的开发目标.这些预实现的组件采用优秀 ...

  9. Web开发基本准则-55实录-Web访问安全

    Web开发工程师请阅读下面的前端开发准则,这是第一部分,强调了过去几年里我们注意到的Web工程师务须处理的Web访问安全基础点.尤其是一些从传统软件开发转入互联网开发的工程师,请仔细阅读,不要因为忽视 ...

随机推荐

  1. Python学习之==>条件判断

    1.单条件判断 # 接收输入的值,使用input函数,用input接收输入的值都是string类型的 age = input('请输入你的年龄:') age = int(age) # 类型转换,转换成 ...

  2. vue2创建webpack项目build之后无法正常显示页面的问题

    最近在做vue项目的时候,项目正常运行,但是当我打包上线之后,却出现无法出现页面空白的情况,打开控制台,发现无法加载到css和js文件. 仔细观察发现路径中少了一个dis文件夹,于是我加上dist文件 ...

  3. python—004

    一.集合(set) 1.定义:不同的元素组成,无序排列的,可哈希的值(存放不可变类型:数字.字符串.元组) s={1,2,'ww',3,4,5,6,7,8,'ee'}print (type(s))pr ...

  4. udb

    1/  配置升级 高可用实例创建时默认是 一主一备  所以可以在线升级, 先升级备库 然后升级主库 所以可以在线升级 只是主备切换的时候有闪断会影响20s左右 有单独创建的从库  那就是一主一备 + ...

  5. spring+redis实例(二)

    这一篇redis实例是基于序列化储存-(写入对象,读取对象) 在spring+redis(一)中我们介绍了在spring中怎么去操作储存redis,基于string的储存,今天我们介绍一下redis基 ...

  6. HDU-5201 The Monkey King

    题目描述 \(m\)个猴子分\(n\)个桃,要求第一个猴子的桃数严格大于其他猴子,问有多少种分法对\(1e9+7取模(\%1e9+7)\) Input \(1≤T≤25 ,1≤n,m≤100000\) ...

  7. ubuntu 个人常用命令

    重启命令 :     1.reboot     2.shutdown -r now 立刻重启    3.shutdown -r 10 过10分钟自动重启    4.shutdown -r 20:35 ...

  8. MD5算法+盐Salt

    1.MD算法的基的概念    MD5算法是典型的消息摘要算法,其前身有MD2.MD3和MD4算法,它由MD4.MD3和MD2算法改进而来.不论是哪一种MD算法,它们都需 要获得一个随机长度的信息并产生 ...

  9. 从头到尾说一次 Java 垃圾回收,写得非常好! (转)

    之前上学的时候有这个一个梗,说在食堂里吃饭,吃完把餐盘端走清理的,是 C++ 程序员,吃完直接就走的,是 Java 程序员.

  10. 3种Redis分布式锁的对比

    我们通常使用的synchronized或者Lock都是线程锁,对同一个JVM进程内的多个线程有效.因为锁的本质 是内存中存放一个标记,记录获取锁的线程是谁,这个标记对每个线程都可见.然而我们启动的多个 ...