又是好久没写博客了,最近把近半年的总结,全部总结到博客园吧。先写最近的一个移动端的学习笔记。毕竟移动端开发了一段时间,就写一写读《移动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力作)的更多相关文章

  1. go语言,golang学习笔记2 web框架选择

    go语言,golang学习笔记2 web框架选择 用什么go web框架比较好呢?能不能推荐个中文资料多的web框架呢? beego框架用的人最多,中文资料最多 首页 - beego: 简约 & ...

  2. Spring实战第六章学习笔记————渲染Web视图

    Spring实战第六章学习笔记----渲染Web视图 理解视图解析 在之前所编写的控制器方法都没有直接产生浏览器所需的HTML.这些方法只是将一些数据传入到模型中然后再将模型传递给一个用来渲染的视图. ...

  3. Dubbo -- 系统学习 笔记 -- 配置参考手册

    Dubbo -- 系统学习 笔记 -- 目录 配置参考手册 <dubbo:service/> <dubbo:reference/> <dubbo:protocol/> ...

  4. VS2013中Python学习笔记[Django Web的第一个网页]

    前言 前面我简单介绍了Python的Hello World.看到有人问我搞搞Python的Web,一时兴起,就来试试看. 第一篇 VS2013中Python学习笔记[环境搭建] 简单介绍Python环 ...

  5. Dubbo -- 系统学习 笔记 -- API参考手册

    Dubbo -- 系统学习 笔记 -- 目录 API参考手册 配置API 注解API 模型API 上下文API 服务API API参考手册 Dubbo的常规功能,都保持零侵入,但有些功能不得不用API ...

  6. 学习笔记之Web

    学习笔记之JavaScript - 浩然119 - 博客园 https://www.cnblogs.com/pegasus923/p/9436340.html 学习笔记之PHP - 浩然119 - 博 ...

  7. Django学习笔记之Web框架由浅入深和第一个Django实例

    Web框架本质 我们可以这样理解:所有的Web应用本质上就是一个socket服务端,而用户的浏览器就是一个socket客户端. 这样我们就可以自己实现Web框架了. 半成品自定义web框架 impor ...

  8. 学习笔记:Web Storage API

    Web Storage API 提供了存储机制,通过该机制,浏览器可以安全地存储键值对,比使用 cookie 更加直观. Web Storage 包含如下两种机制: sessionStorage 为每 ...

  9. tornado学习笔记11 Web应用中模板(Template)使用应用实践

    上一篇中(Web应用中模板的工作流程分析),已经分析了模板的渲染流程,以及相关参数获取及设置原理.这篇主要讲述模板在实际应用案例. 11.1 需求 根据用户输入的两次密码,判断两次密码是否一致,并将判 ...

  10. tornado 学习笔记10 Web应用中模板(Template)的工作流程分析

             第8,9节中,我们分析Tornado模板系统的语法.使用以及源代码中涉及到的相关类,而且对相关的源代码进行了分析.那么,在一个真正的Web应用程序中,模板到底是怎样使用?怎样被渲染? ...

随机推荐

  1. 安装python爬虫scrapy踩过的那些坑和编程外的思考

    这些天应朋友的要求抓取某个论坛帖子的信息,网上搜索了一下开源的爬虫资料,看了许多对于开源爬虫的比较发现开源爬虫scrapy比较好用.但是以前一直用的java和php,对python不熟悉,于是花一天时 ...

  2. javascript的字符串模板

    在其他语言存在字符串内插(string interpolation)或者叫变量内插(Variable interpolation).ES6中的称为template string. 模板字符串使用反引号 ...

  3. FITTING A MODEL VIA CLOSED-FORM EQUATIONS VS. GRADIENT DESCENT VS STOCHASTIC GRADIENT DESCENT VS MINI-BATCH LEARNING. WHAT IS THE DIFFERENCE?

    FITTING A MODEL VIA CLOSED-FORM EQUATIONS VS. GRADIENT DESCENT VS STOCHASTIC GRADIENT DESCENT VS MIN ...

  4. hdu 2084 数塔(动态规划)

    本题是一个经典的动态规划题. 直接利用记忆化搜索:见图解 Ac code : #include<stdio.h> #include<string.h> #define max( ...

  5. html5移动web开发笔记

    width指定虚拟窗口的屏幕宽度大小. height指定虚拟窗口的屏幕高度大小. initial-scale 指定初始缩放比例. maximum-scale指定允许用户缩放的最大比例. minimum ...

  6. 使用qsort对结构体的数据排序

    1007 DNA 排序 题目大意: 序列“未排序程度”的一个计算方式是元素乱序的元素对个数.例如:在单词序列“DAABEC'”中,因为D大于右边四个单词,E大于C,所以计算结果为5.这种计算方法称为序 ...

  7. 不起眼却有大作用的 .NET功能集(转发)

    http://www.cnblogs.com/powertoolsteam/p/top15features.html 目录 1. ObsoleteAttribute2. 设置默认值属性: Defaul ...

  8. POJ 2418 Hardwood Species

                                                     Hardwood Species Time Limit: 10000MS   Memory Limit ...

  9. 学习windows内核书籍推荐 ----------转自http://tieshow.iteye.com/blog/1565926

      虽然,多年java,正在java,看样子还得继续java.(IT小城,还是整java随意点)应用程序 运行于操作系统之上,  晓操作系统,方更晓应用程序. 主看windows,因为可玩性高,闭源才 ...

  10. [BZOJ1171][BZOJ2892]大sz的游戏

    [BZOJ1171][BZOJ2892]大sz的游戏 试题描述 大sz最近在玩一个由星球大战改编的游戏.话说绝地武士当前共控制了N个星球.但是,西斯正在暗处悄悄地准备他们的复仇计划.绝地评议会也感觉到 ...