HTML5开发手机项目-我的总结（转）

时间 2019-11-17

标签 html5 html 开发手机项目我的总结栏目 HTML5 繁體版

原文原文链接

让网页的宽度自适应屏幕<meta name="viewport" content="width=device-width"/>
1）html上加入<meta name="viewport" content=" initial-scale=1.0,user-scalable=no" />
发确保网页的效果
2）加上如下语句可以使网页在苹果设备上运行更好javascript

网页打开方式：<a href="#" target="_blank">连接</a>
target的值：_self(相同学口，浏览器默认)、_top(整页窗口)和_parent(父窗口)相同、_blank(在新建的窗口打开)
<head><base target="_blank" ></head>表示页面中的全部连接都在新窗口打开css

<a href="" rel="external">madinc.co</a>//html

autocomplete="off"//去掉输入框的历史记录html5

querySelector只返回匹配的第一个元素，若是没有匹配项，返回null。
querySelectorAll返回匹配的元素集合，若是没有匹配项，返回空的nodelist(节点数组)。
document.querySelector('#indicator > li.active').className = '';//......java

innerheight: 返回窗口的文档显示区的高度。 (IE用document.documentElement.clientHeight)
innerwidth 返回窗口的文档显示区的宽度。(IE用document.documentElement.clientWidth )node

<-----------------------------------------------------------------HTML5---------------->
<html manifest="manifest.cache">
HTML5新增:
contenteditable:设置是否容许用户编辑元素
contentextmenu:给元素设置一个上下文菜单
draggable:设置是否容许用户拖动元素
irrelevant:设置元素是否相关。不显示非相关的元素。
ref:引用另外一个文档或本文档上另外一个位置。仅在template属性设置时使用
registrationmark:为元素设置拍照。可规定于任何<rule>元素的后代，除了<nest>元素jquery

android

网页针对不一样屏幕分辨率修改，用 padding: 0px; color: #454545; font-family: tahoma, helvetica, arial; line-height: 21px;">
移动网站的视图的标签
<div data-role="page" id="page">
<div data-role="header">...</div>
<div data-role="content">...</div>
<div data-role="footer">...</div>
</div>

HTML5的data-前缀就被称为data属性

本地存储:
sessionStorage.lastname="Smith";//针对session的存储
localStorage.lastname="Smith";//没有时间限制的本地存储(IE8也支持)
document.write(localStorage.lastname);
使用本地存储前应先肯定window.localStorage是否存在

<input id="name" name="name" type="text" placeholder="zhangxinxu" required="required" />//placeholder:默认提示,required:定义输入的字段是否必须(提交时的非空验证)

HTML5 提供了两种检测是否在线的方式：navigator.online（true/false）和 online/offline事件。
navigator.standalone为true:从桌面启动
navigator.standalone为false:从ios浏览器启动

localStorage. length:返回如今已经存储的变量数目。
localStorage. key(n):返回第n个变量的键值(key)。
localStorage.getItem(k):和localStorage.k同样，取得键值为k的变量的值。
localStorage.setItem(k , v):和localStorage.k = v同样，设置键值k的变量值。
localStorage.removeItem(k):删除键值为k的变量。
localStorage.clear():清空全部变量。

window.applicationCache对象的事件:
checking: 用户代理检查更新或者在第一次尝试下载manifest文件的时候，本事件每每是事件队列中第一个被触发的

noupdate: 检测出manifest文件没有更新

downloading: 用户代理发现更新而且正在取资源，或者第一次下载manifest文件列表中列举的资源

progress: 用户代理正在下载资源manifest文件中的须要缓存的资源

cached: manifest中列举的资源已经下载完成，而且已经缓存

updateready: manifest中列举的文件已经从新下载并更新成功，接下来js可使用swapCache()方法更新到应用程序中

obsolete: 一、manifest的请求出现404或者410错误，应用程序缓存被取消二、manifest的请求出现404或者410错误，更新缓存的请求失败三、manifest文件没有改变，可是页面引用的manifest 文件没有被正确地下载

error: 一、在取manifest列举的资源的过程当中发生致命的错误二、在更新过程当中manifest文件发生变化

<---------------------------------------------------------------CSS---------------->
-moz-border-radius: 6px; 6px; border-radius: 6px;//圆角
text-shadow: 2px 2px 5px #333;//添加阴影
none;//不可先择文字(webkit内核的浏览器)
//苹果移动设备上会识别，用于保证文字大小
变形(transformation)、转换(transition)和动画(animation)

图片旋转的一个样式：
transition_duration{

//发生变化的属性
//发生变化的时间
//定义动画变化的曲线
}
transition_duration:hover{

}

transform:旋转、扭曲、缩放、移动、矩阵变形 {transform-origin:元素的基点，默认在元素中心}
transform: rotate(30deg) | scale(2,1.5)(水平,垂直) | skew(30deg,10deg) | translate(100px,20px) |matrix;

<------------------------------------------------------------ajax------------------>
isLocal: true//该请求来自本地计算机

用document.onreadystatechange的方法来监听状态改变，
用document.readyState == “complete”判断是否加载完成

0 － uninitialized （未初始化）尚未调用send()方法
1 － loading （载入）已调用send()方法，正在发送请求
2 － loaded （载入完成）send()方法执行完成，已经接收到所有响应内容
3 － interactive （交互）正在解析响应内容
4 － complete （完成）响应内容解析完成，能够在客户端调用了

<-----------------------------------------------------jQuery js----------------------->
document.getElementById("testButton").addEventListener("click", Go, false);//添加监听事件
window 的DOMContentLoaded事件在造成完成的DOM树以后就会触发，不理会图像、JavaScript文件、CSS文件或其余资源是否已经下载完毕。与load事件不一样，DOMContentLoaded支持在页面下载的早期添加事件处理程序，这也就意味着用户可以尽早地与页面进行交互。(它是火狐下特有的事件)
document.addEventListener('DOMContentLoaded', loaded, false);//

侦听器在侦听时有三个阶段：捕获阶段(根节点到子节点检查是否调用了监听函数)→、目标阶段(目标自己)→冒泡阶段(目标自己到根节点)。
public override function addEventListener(type(事件类型):String, listener():Function, useCapture:Boolean = false, priority:int = 0, useWeakReference:Boolean = false):void

$(selector).bind(event) //向匹配元素添加一个或更多事件处理器
$(selector).live(event) //向匹配元素添加一个事件处理器，如今或未来
$(selector).die() 移除全部经过 live() 函数添加的事件处理器
$(selector).unbind()移除被选元素的事件处理程序,适用于任何经过 jQuery 附加的事件处理程序

Tmpl提供了几种tag：
${}：等同于{{=}}，是输出变量，经过了html编码的。
{{html}}:输出变量html,可是没有html编码，适合输出html代码。
{{if }} {{else}}:提供了分支逻辑。
{{each}}:提供循环逻辑，$value访问迭代变量。

devicePixelRatio:设备像素比,高清iPad下，window.devicePixelRatio为2
(/ipad/gi).test(navigator.appVersion)//判断移动终端的浏览器是否为ipad,navigator.appVersion为浏览器的版本

window.orientation :这个属性给出了当前设备的屏幕方向，0表示竖屏，正负90表示横屏（向左与向右）模式
onorientationchange : 在每次屏幕方向在横竖屏间切换后，就会触发这个window事件，用法与传统的事件相似

页面事件前后顺序：
mobileinit:页面没加载DOM以前事件
pagebeforecreate:页面的DOM加载后，DOM初始化以前触发的事件
pagecreate:在HTML已经在DOM中创建完成，初始化也完成事件
pageinit:页面彻底加载完后

触摸事件
三种在规范中列出并得到跨移动设备普遍实现的基本触摸事件：
1. touchstart：手指放在一个DOM元素上。
2. touchmove：手指拖曳一个DOM元素。
3. touchend：手指从一个DOM元素上移开。
每一个触摸事件都包括了三个触摸列表：
1. touches：当前位于屏幕上的全部手指的一个列表。
2. targetTouches：位于当前DOM元素上的手指的一个列表。
3. changedTouches：涉及当前事件的手指的一个列表。
例如，在一个touchend事件中，这就会是移开的手指。
这些列表由包含了触摸信息的对象组成：
1. identifier：一个数值，惟一标识触摸会话（touch session）中的当前手指。
2. target：DOM元素，是动做所针对的目标。
3. 客户/页面/屏幕坐标：动做在屏幕上发生的位置。
4. 半径坐标和 rotationAngle：画出大约至关于手指形状的椭圆形。

gesturestart  //当两个手指接触屏幕时触发
gesturechange //当两个手指接触屏幕后开始移动时触发
gestureend
onorientationchange  //屏幕旋转事件
orientationchange  // 检测触摸屏幕的手指什么时候改变方向

// 隐藏地址栏 & 处理事件的时候，防止滚动条出现

addEventListener('load', function(){
setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});

e.preventDefault()//取消事件的默认动做
taphold :长按事件

var myscroll=new iScroll("wrapper",{hScrollbar:false, vScrollbar:false});//定义一滚动对象
hScroll:false 禁止横向滚动 true横向滚动默认为true
vScroll:false 禁止垂直滚动 true垂直滚动默认为true
hScrollbar:false 隐藏水平方向上的滚动条
vScrollbar:false 隐藏垂直方向上的滚动条
fixedScrollbar: 在iOS系统上，当元素拖动超出了scroller的边界时，滚动条会收缩，设置为true能够禁止滚动条超出scroller的可见区域。默认在Android上为true， iOS上为false
fadeScrollbar:false 指定在无渐隐效果时隐藏滚动条
hideScrollbar: 在没有用户交互时隐藏滚动条默认为true
bounce: 启用或禁用边界的反弹，默认为true
momentum: 启用或禁用惯性，默认为true，此参数在你想要保存资源的时候很是有用
lockDirection:false 取消拖动方向的锁定， true拖动只能在一个方向上（up/down 或者left/right）
zoom:true 滚动对象能够放大缩小
zoomMax: 指定容许放大的最大倍数，默认为4
onScrollEnd:在滚动完成后的回调
x:滚动水平初始位置
y:滚动垂直初始位置
bounce:true,是否超过实际位置反弹
bounceLock:false,当内容少于滚动是否能够反弹，这个实际用处不大
momentum:true,动量效果，拖动惯性
lockDirection:true,当水平滚动和垂直滚动同时生效时，当拖动开始是否锁定另外一边的拖动
useTransform:true,是否使用CSS形变
useTransition:false,是否使用CSS变换
topOffset:0,已经滚动的基准值(通常状况用不到)
checkDOMChanges:false,是否自动检测内容变化

【注意事项】：若是想要图片缩放的效果很好的话要把他们放到硬件的合成层中。通俗点说，就是在全部须要缩放的img元素上使用"margin: 0px; padding: 0px; color: #454545; font-family: tahoma, helvetica, arial; line-height: 21px;">
document.createElement()是在对象中建立一个对象，要与appendChild() 或 insertBefore()方法联合使用。其中，appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore() 方法在节点的子节点列表任意位置插入新的节点。
<script type="text/javascript">
var board = document.getElementById("board");
var e = document.createElement("input");
e.type = "button";
e.value = "这是测试加载的小例子";
var object = board.appendChild(e);
</script>

encodeURI()//编码
decodeURI()//解码

<video> 标签属性：
src：视频的URL
poster：视频封面，没有播放时显示的图片
preload：预加载
autoplay：自动播放
loop：循环播放
controls：浏览器自带的控制条
width：视频宽度
height：视频高度

中止:
myVideo.currentTime = 0;
myVideo.pause();

浏览器的渲染和操做顺序大体以下：

HTML解析完毕
外部脚本和样式表加载完毕
脚本在文档内解析并执行
HTML DOM彻底构造起来
图片和外部内容加载
网页完成加载

<--------------------tmpl替换-------------------------->

1 news_template = $('#news_template').template();
2 $.tmpl(news_template, manufacture_news).appendTo('#news_content');
3 var html = $("#news_content").html();
4 if (html.indexOf("[br]") > -1)
5 {
6 html = html.$replace("[br]", "<br />");
7 html = html.$replace("&lt;", "<").$replace("&gt;", ">");
8 $("#news_content").html(html);
9 }

1 <script id="news_template" type="text/x-jquery-tmpl">
2 <div class="p_items">
3 <dt class="fix"><h1>${Title}</h1><span>${CreateTime}</span></dt> 
4 <dd>
5 <div style="text-align:center;"><a  href="http://app.dianshijie.net/dzd">${Img}</a></div>
6 <p>${Content}</p>
7 </dd>
8 </div>
9 </script>

------------------数据库优化---------------------
A、数据类型尽可能用数字型，数字型的比较比字符型的快不少。

B、数据类型尽可能小，这里的尽可能小是指在知足能够预见的将来需求的前提下的。

C、尽可能不要容许NULL，除非必要，能够用NOT NULL+DEFAULT代替。

D、少用TEXT和IMAGE，二进制字段的读写是比较慢的，并且，读取的方法也很少，大部分状况下最好不用。

E、自增字段要慎用，不利于数据迁移。

系统设计阶段应该概括一些业务逻辑放在数据库编程实现，数据库编程包括数据库存储过程、触发器和函数。用数据库编程实现业务逻辑的好处是减小网络流量并可更充分利用数据库的预编译和缓存功能。

----------
索引的设计

在设计阶段，能够根据功能和性能的需求进行初步的索引设计，这里须要根据预计的数据量和查询来设计索引，可能与未来实际使用的时候会有所区别。

关于索引的选择，应改主意：

A、根据数据量决定哪些表须要增长索引，数据量小的能够只有主键。

B、根据使用频率决定哪些字段须要创建索引，选择常常做为链接条件、筛选条件、聚合查询、排序的字段做为索引的候选字段。

C、把常常一块儿出现的字段组合在一块儿，组成组合索引，组合索引的字段顺序与主键同样，也须要把最经常使用的字段放在前面，把重复率低的字段放在前面。

D、一个表不要加太多索引，由于索引影响插入和更新的速度。

注意SELECT INTO后的WHERE子句，由于SELECT INTO把数据插入到临时表，这个过程会锁定一些系统表，若是这个WHERE子句返回的数据过多或者速度太慢，会形成系统表长期锁定，诸塞其余进程。
A、控制同一语句的屡次执行，特别是一些基础数据的屡次执行是不少程序员不多注意的。

B、减小屡次的数据转换，也许须要数据转换是设计的问题，可是减小次数是程序员能够作到的。

C、杜毫不必要的子查询和链接表，子查询在执行计划通常解释成外链接，多余的链接表带来额外的开销。

---------尖角代码
<div style="width: 0px; height: 0px; border: solid 50px transparent; border-bottom: solid 100px black;"></div>

手机版网站起码要实现一些基本的功能吧：
1.页面的适用性问题。对于移动终端，有不同的分辨率与屏幕尺寸，若是还像电脑端的设计还限制网页的宽度为1003px或其余像素值，字体大小还用12px或14px，那么，不同的终端的效果差异会很大。因此这里，最好让网页的宽度自适应屏幕，还好，w3c在设计html的时候为咱们考虑了这一点，只需一句话，就能够搞定，就是加上

1 Javascript代码  
2 <meta name="viewport" content="width=device-width"/>

对于字体的话，咱们就用em或ex为单位就好
2.版本制做问题。移动页面每每针对不一样的手机设置不一样的版本，通常有精简版，标准版，3G版，触屏版，智能手机版等等，这些除了在页面设计上有不一样外，页面语言也会不一样的。精简版采用wap 1.0 的wml脚本编写，这个通用性之前很强，不少国产手机都支持这个语言的，但这个语言是很精简的。标准版的通常能够采用wap 2.0技术，对应的脚本语言是xhtml mp(xhtml mobile profile)，这个语言是xhtml的子集，这个而且支持大部分的css,基本上和电脑版的差很少，但通常不能用js，这是考虑到这些手机是不支持 js的。对于智能手机版，因为如今的智能手机都支持js，这个版本的制做上就简单多了，不过，又因为大部分智能手机（基本上除去塞班手机，包括 Android,ios,wp7等）都支持Html5，所以，智能手版能够采用html5来制做。
3.版本控制问题。可能这部分是比较很差解决的，怎么智能判断手机的最佳版本并跳转，能够从这几个方面考虑。一方面，能够想办法获得手机的操做系统，好比，Android的，ios的，就能够跳转到html5版了，windows系统，毫无疑问电脑版，得到手机系统，可能经过获得手机型号，如今的方法是经过浏览器的UA（user agent)，得到手机的一些信息，简单一点的，直接能够经过UA判断手机的制造产商。要想得到更多的信息，就得有一个数据库，由于不一样手机型号会有不一样的UA信息，世界上的手机有不少，本身要想作一个这样的数据库仍是很难的，不过，已经有人为咱们作好了这样的数据库，或者更方便的，作好了一个识别手机适用最佳版本的函数库，这里我推荐用Wurfl。另外一方面，能够经过页面的脚原本判断浏览器对js和html5的支持，代码以下

Javascript代码

<?xml version="1.0" encoding="UTF-8"?>  
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
<meta name="viewport" content="width=device-width"/>  
<title>版本控制</title>  
<script type="text/javascript">  
window.onload = function(){  
  //检测是否支持js  
  try{//检测是否支持html5  
    document.getElementById("c").getContext("2d");  
    document.location = '支持html5版的连接';  
  }catch(e){//不然跳到支持js版  
    document.location = '支持js版';  
  }  
};  
</script>  
</head>  
  
<body>  
<canvas id='c'></canvas>  
普通版  
</body>  
</html>

若是你仅仅想开发一个版本，只是判断一下是否是移动客户端，这里引用一段discuz! x2的代码

Php代码

 1 <?php  
 2 function checkmobile() {  
 3     global $_G;  
 4     $mobile = array();  
 5     static $mobilebrowser_list =array('iphone', 'android', 'phone', 'mobile', 'wap', 'netfront', 'java', 'opera mobi', 'opera mini',  
 6                 'ucweb', 'windows ce', 'symbian', 'series', 'webos', 'sony', 'blackberry', 'dopod', 'nokia', 'samsung',  
 7                 'palmsource', 'xda', 'pieplus', 'meizu', 'midp', 'cldc', 'motorola', 'foma', 'docomo', 'up.browser',  
 8                 'up.link', 'blazer', 'helio', 'hosin', 'huawei', 'novarra', 'coolpad', 'webos', 'techfaith', 'palmsource',  
 9                 'alcatel', 'amoi', 'ktouch', 'nexian', 'ericsson', 'philips', 'sagem', 'wellcom', 'bunjalloo', 'maui', 'smartphone',  
10                 'iemobile', 'spice', 'bird', 'zte-', 'longcos', 'pantech', 'gionee', 'portalmmm', 'jig browser', 'hiptop',  
11                 'benq', 'haier', '^lct', '320x320', '240x320', '176x220');  
12     $useragent = strtolower($_SERVER['HTTP_USER_AGENT']);  
13     if(($v = dstrpos($useragent, $mobilebrowser_list, true))) {  
14         $_G['mobile'] = $v;  
15         return true;  
16     }  
17     $brower = array('mozilla', 'chrome', 'safari', 'opera', 'm3gate', 'winwap', 'openwave', 'myop');  
18     if(dstrpos($useragent, $brower)) return false;  
19   
20     $_G['mobile'] = 'unknown';  
21     if($_GET['mobile'] === 'yes') {  
22         return true;  
23     } else {  
24         return false;  
25     }  
26 }  
27   
28 function dstrpos($string, &$arr, $returnvalue = false) {  
29     if(emptyempty($string)) return false;  
30     foreach((array)$arr as $v) {  
31         if(strpos($string, $v) !== false) {  
32             $return = $returnvalue ? $v : true;  
33             return $return;  
34         }  
35     }  
36     return false;  
37 }  
38 var_dump(checkmobile());//若是是移动端返回true，不然false

4.手机版本的大小问题。通常来讲，对于精简版和普通版的手机网页，咱们是作得越精简越好，能省的代码最好省去，毕竟如今手机流量对用户来讲仍是很宝贵的。好比元素命名，通常页面少的话，命名越短越好，css最好写在一行。css中，有些元素是继承父类的样式的，不用重复定义，善用默认值。

5.浏览器缓存。若是再更新不快的状况下，最好开启浏览器缓存。