html5移动web开发实战必读书记

时间：2022-08-30 10:59:29
主题 HTML5

一、配置移动开发环境

1.各种仿真器、模拟器的下载安装

http://www.mobilexweb.com/emulators

https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Emulators-&-Simulators

2.html5 DTD

<!doctype html>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

safari: 设为屏幕宽度，并根据initial-scale=1.0禁止浏览器缩放

3.帮助html5跨浏览器的库

modernizr

html5shim

innershiv

4.使html5元素在旧版本IE中变成块级元素以及css重置

5.始终使用流式布局fluid layout

6.css媒介查询 media query

@media screen and (min-width: 480px) {...}

@media only screen and (min-width: 320px) {...}

7.用户需求分析工具

google analytics

percentmobile

jQuery mobile的浏览器分级列表：http://jquerymobile.com/gbs/

https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Matrices

二、移动端的配置和优化

1.提供启动图标（优化对各种浏览器的支持）

<link rel="apple-touch-icon-precomposed" sizes="114x114" href="icons/apple-touch-icon-114x114-precomposed.png"> # iphone4

<link rel="apple-touch-icon-precomposed" sizes="72x72" href="icons/apple-touch-icon-72x72-precomposed.png"> # ipad

<link rel="apple-touch-icon-precomposed" href="icons/apple-touch-icon-precomposed.png"> # android

<link rel="shortcut icon" href="icons/apple-touch-icon.png"> # symbian60

文档：关于触摸式图标的一起

2.避免字体被浏览器自动重置

html {

-webkit-text-size-adjust: none;

}

改进

html {

-webkit-text-size-adjust: 100%;

-ms-text-size-adjust: 100%;

text-size-adjust: 100%;

}

3.使用px

4.浏览器宽度完整解决方案

<meta name="HandheldFriendly" content="true"> # 古老版本浏览器

<meta name="MobileOptimized" content="320"> # 老版本浏览器

<meta name="viewport" content="width=device-width">

5.修复移动版safari的re-flow scale问题

<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0"> # 不能缩放了

使用js代码解决不能缩放问题：

var metas = document.getElementByTagName("meta");

var i;

if(navigator.userAgent.match("/iPhone/i)) {

  for(i=0; i<metas.length; i++) {

    if(meta[i].name == "viewport") {

      metas[i].content = "width=device-width, maximum-scale=1.0, minimum-scale=1.0";

    }

  }

  document.addEventListener("gesturestart", gestureStart, false);

}

function gestureStart() {

  for(i=0; i<metas.length; i++) {

    if(meta[i].name == "viewport") {

      metas[i].content = "width=device-width, maximum-scale=1.6, minimum-scale=0.25";

    }

  }

}

更好的版本：https://gist.github.com/903131

jquery mobile版本：https://gist.github.com/1183357

6.在浏览器中启动原生应用

查看safari，黑莓，索爱支持哪些链接启动原生应用

7.iphone下全屏

<meta name="apple-mobile-web-app-capable" content="yes"> # 从界面图标启动时，全屏

<meta name="apple-mobile-web-app-status-bar-style" content="black"> # 顶部一个状态栏

<link rel="apple-touch-startup-image" href="img/1/splash.png"> # 预加载界面图片，类似ajax效果

8.防止ios在聚焦时自动缩放，例如填写表单时

<script>

</script>

9.禁用或者限制部分webkit特性

-webkit-touch-callout

-webkit-user-select

-webkit-tap-highlight-color

-webkit-appearance

为狭窄的浏览器添加省略号功能：

.ellipsis {

text-overflow: ellipsis;

overflow: hidden;

white-space: nowrap;

}

三、移动设备的交互方式

1.利用触控来移动页面元素

2.检测盒处理横竖屏切换事件

window.onorientationchange事件

禁止横竖屏对于网友非常困难

3.利用手势旋转页面元素

ongestureend

4.利用滑动创建图库

zepto框架

5.利用手势缩放图片

ongesturechange

四、构建快速响应式移动互联网站点

1.html5标签

header，nav，footer，small，address

2.css3辅助

polyfills库

ultimate css gradient generator # css线性渐变效果编辑器

CSS3 PIE # 兼容IE9

3.响应式

使用modernizr库开检查浏览器对html3和css3的支持

可以用来检查后是否加载respond.min.js

yepnope异步加载

4.检测客户端

.htaccess重定向

5.使用书签冒泡为应用添加桌面快捷方式

mobilebookmark bubble库 from google # 只支持safari

6.构建可伸缩的文本输入框

mobile boilerplate库的helper.js

7.加速按钮反馈

touchstart

8.隐藏浏览器地址栏

MBP.hideUrlBar();

五、移动设备访问

1.获取位置信息

经度、纬度、当前位置的精确程度

navigator.geolocation.getCurrentPosition()

2.跨浏览器定位

geo-location-javascript库

延伸：YQL Geo库

手势缩放：

<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />

3.实时显示地理位置

watchPosition

4.DeviceOrientation事件 # 适用于ios

包括设备移动事件和横竖屏切换事件

5.使用foursquare定位

Marelle基于jquery和coffeescript

https://praized.github.com/marelle/

包括两个例子：登录和签到

foursquare接口列表

https://developer.foursquare.com/docs/libraries.html

六、移动富媒体

1.移动设备上播放音频

<audio>

不支持html5的浏览器使用polyfills解决

2.移动设备上播放视频

<video>

不支持html5的使用<boject>

http://diveintohtml5.info/video.html

3.使用离线缓存

使用.appcache

4.使用网络存储

web storage # 浏览器支持度最高

html5的indexed database api和web sql database

jqueryoffine库

5.使用web workers

javascript多线程的补充

6.使用session和history api构建类Flash导航效果

七、移动设备调试

1.使用opera dragonfly远程调试

2.使用weinre远程调试

3.移动设备上使用firebug

4.使用js console远程调试

5.配置移动safari调试器

八、服务器端性能调优

1.防止移动设备转码

.htaccess配置

2.添加移动设备支持的MIME类型

.htaccess配置 # 针对blackberry和Symbian等

3.正确显示cache manifest # 主要用来做离线应用存储功能，但是扩展名不能被服务器识别

.htccess配置

4.在头文件中设置未来过期时间

.htccess配置

5.使用gzip压缩

.htaccess配置

6.移除etags

.htaccess配置

九、移动性能测试

1.使用blaze的移动设备速度测试

2.在线分析移动页面速度

google page speed

3.pcap网站性能分析

4.移动版http archive

5.使用jdrop存储性能数据

十、拥抱移动互联网特性

1.window.onerror

2.使用ecmascript5中的新方法

3.html5中的新输入类型

date、datetime、month、time、range

4.HTML中内嵌svg

5.position:fixed

6.overflow:scroll # ios5+

-webkit-overflow-scrolling: touch

html5移动web开发实战必读书记的更多相关文章

  1. HTML5移动Web开发实战 PDF扫描版&ZeroWidthSpace;

    <HTML5移动Web开发实战>提供了应对这一挑战的解决方案.通过阅读本书,你将了解如何有效地利用最新的HTML5的那些针对移动网站的功能,横跨多个移动平台.全书共分10章,从移动Web. ...

  2. html5移动Web开发实战

    1.解决横竖屏字体大小变化 html{ -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; text-size-adjust:100 ...

  3. 《Java web 开发实战经典》读书笔记

    去年年末,也就是大四上学期快要结束的时候,当时保研的事情确定了下来,终于有了一些空闲的时间可以学点实用的技术. 之前做数据库课程设计的时候,也接触过java web的知识,当时做了一个卖二手书籍的网站 ...

  4. Laravel 教程 - Web 开发实战入门 &lpar; Laravel 5&period;5 &rpar;购买链接

      Laravel 教程 - Web 开发实战入门 ( Laravel 5.5 )购买链接: 推荐给你高品质的实战课程 https://laravel-china.org/courses?rf=158 ...

  5. HTML5 Canvas游戏开发实战 PDF扫描版

    HTML5 Canvas游戏开发实战主要讲解使用HTML5 Canvas来开发和设计各类常见游戏的思路和技巧,在介绍HTML5 Canvas相关特性的同时,还通过游戏开发实例深入剖析了其内在原理,让读 ...

  6. 《Java Web开发实战》——Java工程师必备干货教材

    一年一度毕业季,又到了简历.offer漫天飞,失望与希望并存的时节.在IT行业,高校毕业生求职时,面临的第一道门槛就是技能与经验的考验,但学校往往更注重学生的理论知识,忽略了对学生实践能力的培养,因而 ...

  7. 《Python Web开发实战》&vert;百度网盘免费下载&vert;Python Web开发

    <Python Web开发实战>|百度网盘免费下载|Python Web开发 提取码:rnz4 内容简介 这本书涵盖了Web开发的方方面面,可以分为如下部分: 1. 使用最新的Flask ...

  8. HTML5离线Web应用实战：五步创建成功

    [IT168 技术]HTML5近十年来发展得如火如荼,在HTML 5平台上,视频,音频,图象,动画,以及同电脑的交互都被标准化.HTML功能越来越丰富,支持图片上传拖拽.支持localstorage. ...

  9. Web开发人员必读的12个网站

    The more you actually create, the more you’ll learn.(创造的越多,学习的越多),世界上有无数个开发人员会在网上分享他们的开发经验,我们无法向所有人学 ...

随机推荐

  1. Java并发之CountDownLatch

    CountDownLatch是Java concurrent包下的一个同步工具.它可以让一个(或多个)线程等待,直到其他线程中的某些操作完成. 本质上是一个信号量,我们把它比作一个有N个插销的大门,它 ...

  2. 第四篇T语言实例开发，自动加血

    游戏自动加血 基础知识复习 通过前面的学习了解以下内容: TC软件的基本使用 TC的基础语法 变量与常量 功能的使用 流程语句的使用 线程的基本使用 TC控件的基本使用 热键和按钮的事件功能 控件的数 ...

  3. 《统计推断（Statistical Inference）》读书笔记——第1章 概率论

    第一章介绍了基本的概率论知识,以下是这一章的思维导图

  4. HDU4831&amp&semi;&amp&semi;4832&amp&semi;&amp&semi;4834

    好久没打代码啦,今天lu一发百度之星,感觉还是学到不少东西的,写点收获. 第一题就是现在的HDU4831啦,题意很清楚,我一开始以为休息区也可以变为风景区,所以就不敢敲了,后来才得知数据里只会改风景区 ...

  5. jQuery中的&amp&semi;&amp&semi; &vert;&vert;

    jQuery1.2.6 clean方法中有这么一段第一眼看去会让人晕掉的方法.完全不知其所言. “||, && 可以这样用?”,“这段东西最终返回的是个什么对象啊?” // Trim ...

  6. linq读书笔记2-查询内存中的对象

    上次我们说到了linq对数组内容的检索,自.net2.0以后,泛型成了很常见的一种应用技术,linq对泛型的检索也提供了完善的支持 如对list类型的支持,范例如下: class Program    ...

  7. java集合（3）- Java中的equals和hashCode方法详解

    参考:http://blog.csdn.net/jiangwei0910410003/article/details/22739953 Java中的equals方法和hashCode方法是Object ...

  8. Linux Mint chrome浏览器提示&OpenCurlyDoubleQuote;需要安装adobe flash player”

    出现这种情况,是因为系统没有安装flash 插件造成的,用以下的命令安装: sudo apt-get install adobe-flashplugin 安装完成后,重启浏览器. 如果chrome浏览 ...

  9. angular--解决angular图片加载失败问题

    基于angular4写的一个指令,在ionic3.x项目在用.因为加载图片超时等原因导致图片显示不出来,需要替换成默认或者指定图片 1.err-src.ts import { Directive,In ...

  10. ABP-添加表

    1.在My_ABP.Core根目录下先创建一个文件夹,在该文件夹里创建一个公共的类,在里面定义所需要用到的属性 public class Person:Entity      {         pu ...

相关文章