【学习笔记】移动Web手册(PPK力作)
又是好久没写博客了,最近把近半年的总结,全部总结到博客园吧。先写最近的一个移动端的学习笔记。毕竟移动端开发了一段时间,就写一写读《移动web手册》中,对我感触比较深的几个点——
一、浏览器相关
1. 浏览器的类型——内置浏览器、可下载浏览器、代理浏览器以及webview。这里的代理浏览器是指服务端进行对页面的渲染,把结果发送给客户端进行显示,比较少见。
2. 内置浏览器的升级——大多数内置浏览器都被紧密集成到底层的操作系统中,也就是说,无法单独升级浏览器。因此,为了得到新的Safary版本,你必须升级IOS。
3. 解释WebView——WebView是留给原生应用的一个操作系统浏览接口。苹果不允许在IOS设备上安装其他渲染引擎。(其他平台是可以的)因此,其他浏览器要想在IOS上安装就必须用苹果的WebView。IOS上的Chrome就是这样的,同样的还有Opera Coast。大体上,WebView是独立的程序,用了内置浏览器很多底层的组件(比如渲染引擎),但是在其他方面可能会有所不同。如果希望你的页面能在WebView里跑起来的话,你最好在WebView上测试一下。
4. 手机上的WebKit——先列出不使用WebKit的浏览器:
. IE Mobile使用Trident
. Opera Mini使用Presto,但是最终会换成Blink
. Chrome浏览器用Blink
. Firefox Mobile和Firefox OS使用Gecko
. UC Mini、Nokia Xpress还有Jolla的Sailfish OS上的内置浏览器也用的是Gecko
任何没在上面提到的浏览器都用WebKit。乍一看,这么多浏览器都用WebKit的事实对于Web开发者似乎是一个强大的支持,不幸的是,一个浏览器用Webkit并不意味着它跟其他任何基于Webkit的浏览器一样。实际上,它们有很大的不同,依赖于操作系统、键盘、鼠标还有触屏交互。平台所有者必须提供所有这些功能。
所以,手机上没有WebKit。很多浏览器用着差不多一样的渲染引擎但是在细节上却大不相同。你最好在所有不同的基于WebKit的浏览器上测试你的网站。
5. 测试Android浏览器——对于Android设备的浏览器,有三个必须测试的浏览器:
1. 安卓WebKit4,富含不同的设备和不同版本的安卓系统。一个专门的设备实验室需要大概6到8个这样的来自不同厂商的设备。一个小型实验室必须拥有2到3个:三星、HTC和一个其他厂商的设备
2. Google Chrome。如果你的设备上没有,下载一个。
3. 三星Chrome(三星字Galaxy S4发布以来,三星开始使用他自己开发的基于Chromium的一款浏览器作为内置浏览器,因此出现三星Chrome)。你讲需要购买一个2013年获以后发布的三星高端手机——类似Galaxy S4或更新的设备
二、视口相关
1. css像素和设备像素——一个css像素相当于多少个设备像素取决于屏幕的特性(是否是高密度)和用户进行的缩放。用户放大得越大,一个css像素覆盖的设备像素越多。当在使用css和javascript的时候,你并不在意一个css像素跨越了多少个设备像素。你开心地讲这个依赖于屏幕特性和用户缩放程度的复杂计算交给了浏览器。这就是为什么css像素是专门为我们Web开发者创造的一个抽象层。
2. 布局视口:CSS布局会根据它来计算,并被它约束。在手机上,为了容纳为桌面浏览器设计的网站,默认的布局视口宽度远大于屏幕的宽度。
<!-- width属性设置布局视口的宽度为特定的值 -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
3. 视觉视口:它是用户正在看到的网站的区域。用户可以缩放来操作视觉视口,同时不会影响布局视口,布局视口仍保持在原来的宽度。视觉视口与设备屏幕一样宽,并且它的CSS像素的数量会随着用户缩放而改变。
4. 理想视口:对于特定设备上的特定浏览器的布局视口的一个理想尺寸,用户刚进入页面时不再需要缩放,拥有最理想的浏览和阅读的宽度
5. 设备像素比:设备像素个数和理想视口的比,成为设备像素比(Device Pixel Ratio),简称DPR。在js中可以使用window.devicePixelRatio来获取
6. meta标签:meta视口标签存在的主要目的是让布局视口的尺寸和理想视口的尺寸匹配。
7. 视口尺寸度量:document.documentElement.clientWidth/Height返回的是布局视口的尺寸,被普遍支持。window.innerWidth/Height返回视觉视口的尺寸。接近被普遍支持。screen.width/height返回理想视口的尺寸。有很严重的浏览器兼容性 问题。
三、性能相关
1. css过度和动画——它们的问题不在浏览器,而在设备,浏览器对两者的支持都很好。但是为了达到非常平滑的效果,浏览器必须借助设备GPU的计算能力。在高端智能手机上不成问题,但对于早期和廉价的手机来说,它们可能根本没有响应的硬件和系统API。这就导致最终的动画效果很生硬。所以,只要你使用了过度和动画,就在你能找到的最老、最差的设备上进行测试。
最后附上这本书的封面图片——
【学习笔记】移动Web手册(PPK力作)的更多相关文章
- go语言,golang学习笔记2 web框架选择
go语言,golang学习笔记2 web框架选择 用什么go web框架比较好呢?能不能推荐个中文资料多的web框架呢? beego框架用的人最多,中文资料最多 首页 - beego: 简约 & ...
- Spring实战第六章学习笔记————渲染Web视图
Spring实战第六章学习笔记----渲染Web视图 理解视图解析 在之前所编写的控制器方法都没有直接产生浏览器所需的HTML.这些方法只是将一些数据传入到模型中然后再将模型传递给一个用来渲染的视图. ...
- Dubbo -- 系统学习 笔记 -- 配置参考手册
Dubbo -- 系统学习 笔记 -- 目录 配置参考手册 <dubbo:service/> <dubbo:reference/> <dubbo:protocol/> ...
- VS2013中Python学习笔记[Django Web的第一个网页]
前言 前面我简单介绍了Python的Hello World.看到有人问我搞搞Python的Web,一时兴起,就来试试看. 第一篇 VS2013中Python学习笔记[环境搭建] 简单介绍Python环 ...
- Dubbo -- 系统学习 笔记 -- API参考手册
Dubbo -- 系统学习 笔记 -- 目录 API参考手册 配置API 注解API 模型API 上下文API 服务API API参考手册 Dubbo的常规功能,都保持零侵入,但有些功能不得不用API ...
- 学习笔记之Web
学习笔记之JavaScript - 浩然119 - 博客园 https://www.cnblogs.com/pegasus923/p/9436340.html 学习笔记之PHP - 浩然119 - 博 ...
- Django学习笔记之Web框架由浅入深和第一个Django实例
Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义web框架 impor ...
- 学习笔记:Web Storage API
Web Storage API 提供了存储机制,通过该机制,浏览器可以安全地存储键值对,比使用 cookie 更加直观. Web Storage 包含如下两种机制: sessionStorage 为每 ...
- tornado学习笔记11 Web应用中模板(Template)使用应用实践
上一篇中(Web应用中模板的工作流程分析),已经分析了模板的渲染流程,以及相关参数获取及设置原理.这篇主要讲述模板在实际应用案例. 11.1 需求 根据用户输入的两次密码,判断两次密码是否一致,并将判 ...
- tornado 学习笔记10 Web应用中模板(Template)的工作流程分析
第8,9节中,我们分析Tornado模板系统的语法.使用以及源代码中涉及到的相关类,而且对相关的源代码进行了分析.那么,在一个真正的Web应用程序中,模板到底是怎样使用?怎样被渲染? ...
随机推荐
- DNS安全浅议、域名A记录(ANAME),MX记录,CNAME记录
相关学习资料 http://baike.baidu.com/link?url=77B3BYIuVsB3MpK1nOQXI-JbS-AP5MvREzSnnedU7F9_G8l_Kvbkt_O2gKqFw ...
- C++ map 映照容器
map映照容器的元素数据是一个键值和一个映照数据组成的,键值与映照数据之间具有一一映照的关系. map映照容器的数据结构是采用红黑树来实现的,插入键值的元素不允许重复,比较函数只对元素的键值进行比较, ...
- easyui datagrid 编辑器绑定事件
依照网上的和自己想的,在获取编辑器后直接绑定事件,思路没有问题,但是总是不响应 细细浏览网上的资料,无意中看到editor 的type 类型和自己写的不一致,自己写的是textbox,而网上的是val ...
- ubuntu14.04配置中文latex完美环境(texlive+texmaker+lyx)
Ubuntu下的文档编辑虽然有libreoffice,但对中文和公式的排版始终不如ms office,因此要想写出高质量的文档,只能靠latex了,现在随着xeCjk的开发,中文文档在ubuntu下的 ...
- 新浪微博客户端(17)-集成MJExtension
使用MJExtension框架将字典转换为模型 DJHomeViewController.m /** 载入新的微博数据 */ - (void)loadNewStatues { AFHTTPSessio ...
- Jquery 获取URL参数
使用jquery获取url以及使用jquery获取url参数是我们经常要用到的操作 1.jquery获取url很简单,代码如下 1.window.location.href; 其实只是用到了javas ...
- ubuntu安装wiz笔记
wiz笔记支持跨平台 下面记录一下如何在ubuntu下面安装wiz笔记 1,ubuntu默认是没有wiz资源的,需要先添加官方ppa软件仓库 sudo add-apt-repository ppa:w ...
- Lamp学习笔记
1,php.ini 文件在哪里 /opt/app/php-5.3/etc/php.ini -------------------------------------------- 2014-0 ...
- javascript,css延迟加载器
/** * js/css LazyLoad * * 变量hash记录已经加载过的资源,避免重复加载 * * Z.loadScript('a.js', function() { ... }) * * Z ...
- 登录DA面板出现:License has expired
登录DA面板出现:License has expired的解决方法. 首先看是否过期,如果出现The license looks fine on this end. 登录 SSH as root # ...