移动Web开发实践
移动设备的高速发展给用户带来了非常大的便利。用户使用Android、iPhone和其他移动设备非常easy接入互联网。
移动设备对网页的性能要求比較高。以下就说说Mobile Web开发的一些心得。
Viewport
当你用iPhone訪问一个没有面向移动设备优化过的站点时(最好选取960px宽度的站点)。你会发现iPhone上面刚好能够把整个页面显示出来,可是页面被缩小了许多。字体很小。这其实是Sarari默认把自己当成980px宽度来处理的,而全部iPhone(竖屏)的真实宽度为320px,其实差点儿全部的移动设备都有类似的情况,iPhone的请參考iPhone
5 Display Size and Web Design Tips。这就牵扯到Viewport的概念了。
Viewport是浏览器的可视区域,也是浏览器的宽度,在PC上面问题比較简单,宽度是多少就多少。可是在移动设备上,浏览器尝试去把整个页面都显示出来,所以就会Viewport值不准确的情况。比如上面提到的Safari从iPhone那里获取到宽度是980px(浏览器仅仅能从系统那里获取宽度)。所以我们要做第一件事就是要浏览器用真实的宽度去解析页面,代码例如以下:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
"width=device-width"表示浏览器用它自己真实的宽度,如iPhone上面就是320px,initial-scale=1.0表示默认不进行缩放。
关于Viewport很多其它请參考: redirectlocale=en-US&redirectslug=Mobile%2FViewport_meta_tag">Using
the viewport meta tag to control layout on mobile browsers
补充一下:设备像素不等于CSS像素,比如用户放大页面300%。CSS像素也跟着放大300%,但设备像素肯定不会有变化。非常多设备为了保证良好浏览效果,一般会告诉浏览器一个假的分辨率,比如iPhone5s的设备分辨率是640x1136,可是却告诉浏览器它的分辨率是320x568(站点要加width=device-width,否则是980宽度),否则真的以640x1136在那点屏幕上进行浏览页面肯定要近视了。
响应式设计
移动设备的分辨率多种多样。这就要求我们要在全部设备上都能非常好的展示。而响应式设计就是非常好的解决方式。BootStrap等框架都号称移动优先,当然缺点是文件比較大,假设站点比較简单的话能够自己用百分比写写就能够了。很多其它响应式设计请參考:响应式设计介绍
图片精度
如今新的手机配置都比較高,绝大部分手机的像素比例(devicePixeRatio)都超过1,iPhone的Retina屏幕的像素比例为2,Nexus5的像素比例为3。
像素比例高的屏幕必需要有高清的图片,这样显示效果才好,比方iPhone5s的竖屏宽度为320px,可是仅仅有使用640px宽度的图片才干完美显示。
我们的开发经验是图片以iPhone5s为标准进行处理,就是在iPhone5s上面必须是高清显示,其他广大Anroid设备上自适应处理。
性能相关
Zepto.js
jQuery很强大。可是它的体积比較大。即使是2.x的压缩版也有82KB。
ZeptoJS号称迷你版jQuery,兼容大部分的jQuery API。它的大小仅仅有24KB,由于它仅仅支持移动浏览器,全部体积小,速度快。
Lazy load
对于移动网页来说。真正消耗流量部分应该是图片部分。由于图片通常都比較大,所以我们能够使用Lazy Load的方式仅仅载入当前屏幕中的图片。由于用户非常多时候仅仅是看一下当前屏幕的内容就跳到下一页了。没有必要一次把全部图片都载入进来。
- 其他
为了提高性能和降低下载流量,我们能够压缩合并CSS,JS文件,对图片进行压缩处理,对图标进行合并等。
HTML5 & CSS3
移动设备上的浏览器都是比較新的浏览器,基本上都支持HMTL5和CSS3的新的功能。因此我们应该多使用它们。最起码我们能够使用CSS3的圆角效果来替换图片。以下列出一些很有用的CSS3特性。
rem
CSS经常使用px, pt作为字体单位。可是它们的缺点是它们是绝对值。百分比(%)和em作为字体单位时大小,它们的值是由它们的父元素的字体大小决定的,优点是它的值是动态变化的。缺点是由于每一个元素的父元素的字体大小都不一样,因此各个em的大小也不一样。终于导致统一设置字体大小。
而rem相对于百分比和em来说。它是相对于root 元素的字体大小而不是父元素,这样不论什么一个元素使用rem作为单位时它的參考单位都是一样的。
这样我们就统一控制整个页面的字体大小了。
请參考:CSS3的REM设置字体大小
动画
我们通经常使用JS来实现动画,比方jQuery的animation(),可是JS的性能比較原生的CSS3动画要差非常多。所以能用CSS3实现的动画就用CSS3实现。
參考文档
最新文章
- <;script>;中的代码
- 用Latex写学术论文:作者(Author)&;摘要(Abstract)
- 通过程序校验xml文档学习笔记
- [原创]java WEB学习笔记73:Struts2 学习之路-- strut2中防止表单重复提交
- Facebook 内部高效工作PPT
- 【Android】SDK工具学习 - Traceview 和 dmtracedump
- php代理请求
- iOS — Autolayout之Masonry解读
- ztree学习笔记(一)
- Java微信公众平台开发_02_启用服务器配置
- 本地访问服务器上的wamp
- Eclipse拷贝动态的web工程修改context root的值
- 让hive的表注释和字段注释支持中文
- domino server端的Notes.ini详解
- 2019.01.22 zoj3583 Simple Path(并查集+枚举)
- django日志使用TimeRotateFileHandler
- Python:查看矩阵大小,查看列表大小
- Codeforces 898F - Restoring the Expression(字符串hash)
- CLR via C# 读书笔记-26.线程基础
- linq to sql 分页技术
热门文章
- PYDay10&;11&;12&;13-常用模块:time|datetime|os|sys|pickle|json|xml|shutil|logging|paramiko、configparser、字符串格式化、py自动全局变量、生成器迭代器
- pycharm调整字体大小
- c++ 一个cpp文件如何调用另一个cpp文件已经定义的类?我不想重复定义
- sublime text2-text3 定义的不同浏览器的预览快捷键
- POJ 2699 The Maximum Number of Strong Kings ——网络流
- USACO Hamming Codes
- 洛谷 [P1290] 欧几里得的游戏
- Phantomjs和Casperjs,后台网页抓取和交互
- Java学习:二 基础
- go gin框架 static 静态文件