您的位置: 首页 > APP开发 > html5开发手机app

html5开发手机app

2022-01-25 17:24:31        栏目: APP开发

APP的开发模式:Native App、Web App、Hybrid App三种开发模式

Native app开发Native APP开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS、Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是由云服务器数据+app应用客户端两部份构成,APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。Web App开发Web App开发即是一种框架型APP开发模式(HTML5 APP 框架开发模式),该开发具有跨平台的优势,该模式通常由HTML5云网站+APP应用客户端两部份构成,APP应用客户端只需安装应用的框架部份,而应用的数据则是每次打开APP的时候,去云端取数据呈现给手机用户。Hybrid App开发综合两者

html5开发手机app_app开发本质

混合app开发前景怎么样

混合开发概述

主要以JS+Native两者相互调用为主,从开发层面实现“一次开发,多处运行”的机制,成为真正适合跨平台的开发。

作用

兼具了Native App良好用户体验的优势,也兼具了Web App使用HTML5跨平台开发低成本的优势。

移动应用开发的方式

Native App: 本地应用程序;

Web App:网页应用程序;

Hybrid App:混合应用程序;

2016年手机app开发前景怎么样

2016年,APP开发必定是Web和Native的融合。以HTML5为代表的Web技术在Native App中有越来越多的应用场景。一方面是Native App开发团队在保证功能和性能的同时,需要提高开发效率,降低运营成本;另一方面是App用户在满足需求和体验的同时,就是将一个原生APP作为强大的流量入口,再使用HTML5技术进行快速功能扩展。APICloud也推出SuperWebView,支持用HTML5开发具有原生UI和UE体验的界面,并且能很好的把蓝牙、WiFi和智能硬件相连接,从用户的角度不会察觉和原生view界面有任何差别。

2016年,HTML5与Native将会进入融合时代。

html5开发手机app_app开发本质

Web前端开发和H5开发有什么区别?学Web要学H5 那是不是H5. 开发比web简单好学啊 ?

有区别,但区别不大。

HTML5是HTML标准,它本身是一项标准化协议,然而被炒热后登上了互联网行业的招聘条目,HTML5开发这个名词本身就是不专业的称呼,通常意义上指使用HTML5等较为潮流的技术进行前端开发。

与Web前端开发不同的是,使用HTML5不仅仅可以开发前端,手机APP,使用浏览器进行3D渲染等一系列建立在HTML5标准与搭载其标准浏览器上的开发,而未来可能会有更多的功能分支并入HTML5标准,况且以上三个例子有可能属于Web,有可能属于前端,但是不属于Web前端

html5开发手机app

来自/welan/item/9206c0336b665abf134b14c2很不错的总结

让网页的宽度自适应屏幕meta nameviewport contentwidthdevice-width/  
 1html上加入meta nameviewport content initial-scale1.0,user-scalableno /
发确保网页的效果
2
加上以下语句可使网页在苹果设备上运行更好
meta nameapple-mobile-web-app-capable contentyes /
meta nameapple-mobile-web-app-status-bar-style contentblack /
meta contentblack nameapple-mobile-web-app-status-bar-style /
3加入这句话可以定义iphone的添加到主屏幕的图标
link relapple-touch-icon href/images/logo.png /


网页打开方式a href# target_blank链接/a
target的值_self(相同窗口浏览器默认)、_top(整页窗口)和_parent(父窗口)相同、_blank(在新建的窗口打开)
headbase target_blank /head表示页面中的所有链接都在新窗口打开

a href relexternalmadinc.co/a//

autocompleteoff//去掉输入框的历史记录

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

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

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

!IE8以及以下不支持HTML5的解决办法
!--[if IE]
script src/svn/trunk/html5.js/script
![endif]--

meta nameviewport contentwidthdevice-width,  initial-scale1.0, user-scalable0, minimum-scale1.0,  maximum-scale1.0 /// 控制手机全屏  强制让文档的宽度与设备的宽度保持1:1 并且文档最大的宽度比例  是1.0且不允许用户点击屏幕放大浏览
//viewport:可视区域
//initial-scale:初始的缩放比例;user-scalable:用户是否可以手动缩放;
//minimum-scale:允许用户缩放的最小比例;maximum-scale :允许用户缩放的最大比例

meta nameformat-detection contenttelephoneno///在手机中不会将网页中的一串数字(电话号码)显示为拨号的超链接,默认telephoneyes 

meta name”apple-mobile-web-app-capable” content”yes” ///删除黙认的苹果菜单栏和工具栏,如需要苹果菜单栏和工具栏可不加

meta name”apple-mobile-web-app-status-bar-style”  content”default”  ///控制状态栏样式content有三个值default、black、black-translucent

link relapple-touch-icon hrefres/images/icon.png ///对移动网站-mobile web进行收藏“添加到桌面图标”的时候增加的图标定义属性
//apple-touch-icon:增加高光光亮的图标
//apple-touch-icon-precomposed:设计原图图标

网页针对不同屏幕分辨率修改用-webkit-device-pixel-ratio这个media标签或在js中用  window.devicePixelRatio这个方法设置target-densitydpi标签和device-dpi属性。这让你的定制更具有 灵活性。


移动网站的视图的标签
div data-rolepage idpage
div data-roleheader.../div
div data-rolecontent.../div
div data-rolefooter.../div
/div

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

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

input idname namename typetext placeholderzhangxinxu  requiredrequired  ///placeholder:默认提示,required:定义输入的字段是否必须(提交时的非空验证)

HTML5 提供了两种检测是否在线的方式navigator.onlinetrue/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: 1、manifest的请求出现404或者410错误应用程序缓存被取消 2、manifest的请求出现404或者410错误更新缓存的请求失败 3、manifest文件没有改变但是页面引用的manifest 文件没有被正确地下载

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


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

图片旋转的一个样式
transition_duration{
-webkit-transform:rotate(10deg);
-webkit-transition-property:all; //发生变化的属性
-webkit-transition-duration:0.5s; //发生变化的时间
-webkit-transition-timing-function:ease-in;//定义动画变化的曲线
}
transition_duration:hover{
-webkit-transform:rotate(40deg);
}


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. targetDOM元素是动作所针对的目标。
3. 客户/页面/屏幕坐标动作在屏幕上发生的位置。
4. 半径坐标和 rotationAngle画出大约相当于手指形状的椭圆形。


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

// 隐藏地址栏   处理事件的时候 防止滚动条出现
addEventListener(load, function(){
setTimeout(function(){ window.scrollTo(0, 1); }, 100);
});


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


var myscrollnew 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元素上使用-webkit- transform:translate3d(0,0,0)来实现而且尤为重要的是硬件的加速会占用大量资源要谨慎使用否则你的应用可能就此崩 溃。


document.createElement()是在对象中创建一个对象要与appendChild() 或  insertBefore()方法联合使用。其中appendChild() 方法在节点的子节点列表末添加新的子节点。insertBefore()  方法在节点的子节点列表任意位置插入新的节点。
script typetext/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替换
news_template  $(#news_template).template();
$.tmpl(news_template, manufacture_news).appendTo(#news_content);
var html  $(#news_content).html();
if (html.indexOf([br])  -1)
{
html  html.$replace([br], br /);
html  html.$replace(lt;, ).$replace(gt;, );
$(#news_content).html(html);
}

script idnews_template typetext/x-jquery-tmpl
div classp_items
dt classfixh1${Title}/h1span${CreateTime}/span/dt 
dd
div styletext-align:center;a  href/dzd${Img}/a/div
p${Content}/p
/dd
/div
/script


数据库优化
A、数据类型尽量用数字型数字型的比较比字符型的快很多。

B、 数据类型尽量小这里的尽量小是指在满足可以预见的未来需求的前提下的。

C、 尽量不要允许NULL除非必要可以用NOT NULLDEFAULT代替。

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

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

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


索引的设计

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

关于索引的选择应改主意

A、根据数据量决定哪些表需要增加索引数据量小的可以只有主键。

B、根据使用频率决定哪些字段需要建立索引选择经常作为连接条件、筛选条件、聚合查询、排序的字段作为索引的候选字段。

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

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

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

B、减少多次的数据转换也许需要数据转换是设计的问题但是减少次数是程序员可以做到的。

C、杜绝不必要的子查询和连接表子查询在执行计划一般解释成外连接多余的连接表带来额外的开销。


尖角代码
div stylewidth: 0px; height: 0px; border: solid 50px transparent; border-bottom: solid 100px black;/div



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

Javascript代码

meta nameviewport contentwidthdevice-width/  

meta nameviewport contentwidthdevice-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系统毫无疑问电脑版获得手机系统可能通过得到手机型号现在的 方法是通过浏览器的UAuser  agent)获得手机的一些信息简单一点的直接可以通过UA判断手机的制造产商。要想获得更多的信息就得有一个数据库因为不同手机型号会有不一 样的UA信息世界上的手机有很多自己要想做一个这样的数据库还是很难的不过已经有人为我们做好了这样的数据库或者更方便的做好了一个识别手机 适用最佳版本的函数库这里我推荐用Wurfl。另一方面可以通过页面的脚本来判断浏览器对js和html5的支持代码如下 

Javascript代码

?xml version1.0 encodingUTF-8?  

!DOCTYPE html PUBLIC -//WAPFORUM//DTD XHTML Mobile 1.0//EN /DTD/xhtml-mobile10.dtd  

html xmlns/1999/xhtml  

head  

meta http-equivContent-Type contenttext/html; charsetutf-8 /  

meta nameviewport contentwidthdevice-width/  

title版本控制/title  

script typetext/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 idc/canvas  

普通版  

/body  

/html  

?xml version1.0 encodingUTF-8?!DOCTYPE html PUBLIC -//WAPFORUM//DTD XHTML Mobile 1.0//EN /DTD/xhtml-mobile10.dtdhtml xmlns/1999/xhtmlheadmeta http-equivContent-Type contenttext/html; charsetutf-8 /meta nameviewport contentwidthdevice-width/title版本控制/titlescript typetext/javascriptwindow.onload  function(){  //检测是否支持js  try{//检测是否支持html5document.getElementById(c).getContext(2d);document.location  支持html5版的链接;  }catch(e){//否则跳到支持js版document.location  支持js版;  }};/script/headbodycanvas idc/canvas普通版/body/html


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

Php代码

?php  

function checkmobile() {  

global $_G;  

$mobile  array();  

static $mobilebrowser_list array(iphone, android, phone, mobile, wap, netfront, java, opera mobi, opera mini,  

ucweb, windows ce, symbian, series, webos, sony, blackberry, dopod, nokia, samsung,  

palmsource, xda, pieplus, meizu, midp, cldc, motorola, foma, docomo, up.browser,  

up.link, blazer, helio, hosin, huawei, novarra, coolpad, webos, techfaith, palmsource,  

alcatel, amoi, ktouch, nexian, ericsson, philips, sagem, wellcom, bunjalloo, maui, smartphone,  

iemobile, spice, bird, zte-, longcos, pantech, gionee, portalmmm, jig browser, hiptop,  

benq, haier, ^lct, 320x320, 240x320, 176x220);  

$useragent  strtolower($_SERVER[HTTP_USER_AGENT]);  

if(($v  dstrpos($useragent, $mobilebrowser_list, true))) {  

$_G[mobile]  $v;  

return true;  

}  

$brower  array(mozilla, chrome, safari, opera, m3gate, winwap, openwave, myop);  

if(dstrpos($useragent, $brower)) return false;  

$_G[mobile]  unknown;  

if($_GET[mobile]  yes) {  

return true;  

} else {  

return false;  

}  

}  

function dstrpos($string, $arr, $returnvalue  false) {  

if(emptyempty($string)) return false;  

foreach((array)$arr as $v) {  

if(strpos($string, $v) ! false) {  

$return  $returnvalue ? $v : true;  

return $return;  

}  

}  

return false;  

}  

var_dump(checkmobile());//如果是移动端返回true否则false  

?phpfunction checkmobile() {\tglobal $_G;\t$mobile  array();\tstatic $mobilebrowser_list array(iphone, android, phone, mobile, wap, netfront, java, opera mobi, opera mini,ucweb, windows ce, symbian, series, webos, sony, blackberry, dopod, nokia, samsung,palmsource, xda, pieplus, meizu, midp, cldc, motorola, foma, docomo, up.browser,up.link, blazer, helio, hosin, huawei, novarra, coolpad, webos, techfaith, palmsource,alcatel, amoi, ktouch, nexian, ericsson, philips, sagem, wellcom, bunjalloo, maui, smartphone,iemobile, spice, bird, zte-, longcos, pantech, gionee, portalmmm, jig browser, hiptop,benq, haier, ^lct, 320x320, 240x320, 176x220);\t$useragent  strtolower($_SERVER[HTTP_USER_AGENT]);\tif(($v  dstrpos($useragent, $mobilebrowser_list, true))) {\t\t$_G[mobile]  $v;\t\treturn true;\t}\t$brower  array(mozilla, chrome, safari, opera, m3gate, winwap, openwave, myop);\tif(dstrpos($useragent, $brower)) return false;\t$_G[mobile]  unknown;\tif($_GET[mobile]  yes) {\t\treturn true;\t} else {\t\treturn false;\t}}function dstrpos($string, $arr, $returnvalue  false) {\tif(empty($string)) return false;\tforeach((array)$arr as $v) {\t\tif(strpos($string, $v) ! false) {$return  $returnvalue ? $v : true;return $return;\t\t}\t}\treturn false;}var_dump(checkmobile());//如果是移动端返回true否则false


4.手机版本的大小问题。一般来说对于精简版和普通版的手机网页我们是做得越精简越好能省的代码最好省去毕竟现在手机流量对用户来说还是 很宝贵的。比如元素命名一般页面少的话命名越短越好css最好写在一行。css中有些元素是继承父类的样式的不用重复定义善用默认值。 
5.浏览器缓存。如果再更新不快的情况下最好开启浏览器缓存