设为首页 加入收藏

TOP

用HTML5、Css3和Javascript的特殊特性来开发Web Mobile
2014-11-24 14:16:51 来源: 作者: 【 】 浏览:0
Tags:HTML5 Css3 Javascript 特殊 特性 开发 Web Mobile

一、Mobile 特殊的HTML


1.用viewport标记使网页更加适应手机屏幕。



2.调用手机拨电话面板



Call us at 1-800-555-5555



3.调用手机短信面板





//body参数貌似不起作用,也解析成电话号码了



4.设置是否关联打电话





5.IOS 特殊的HTML

















6.设置是否使用输入的自动更正、自动不全、英文自动首字母大写





二、Mobile特殊的CSS



1.Media Queries



Meida Queries可以使你根据屏幕的分标率(resolution)、方向(orientation)和尺寸(screen width)来分别实现特殊的效果。



可以有两种实现方式:1)在样式表中嵌入css。2)在link标记中使用“media”属性,来引入css文件,下面来举例说明:



只有屏幕是portrait(竖直)的时候,该css才会起作用:



@media all and (orientation: portrait) {...}





下面是另外一些例子:



// target small screens (mobile devices or small desktop windows)


@media only screen and (max-width: 480px) {


/* CSS goes here */


}


/* high resolution screens */


@media (-webkit-min-device-pixel-ratio: 2),


(min--moz-device-pixel-ratio: 2),


(min-resolution: 300dpi) {


header { background-image: url(header-highres.png); }


}


/* low resolution screens */


@media (-webkit-max-device-pixel-ratio: 1.5),


(max--moz-device-pixel-ratio: 1.5),


(max-resolution: 299dpi) {


header { background-image: url(header-lowres.png); }


}



2.其它的CSS



-webkit-tap-highlight-color (iOS):设置单击超链接的系统背景色。



-webkit-user-select: none;禁止用户选择文本。



-webkit-touch-callout: none;禁止弹出操作提示(当你长按一个链接,ios会在屏幕下方弹出操作提示面板)



三、特殊的java script


1.window.scrollTo(0,0);



2.window.matchMeida();



(iOS 5+) Again, just as CSS media queries aren’t specific to mobile, they do come in especially useful for mobile, so it’s worth mentioning their java script counterpart. window.matchMedia() is a java script-based version of media queries. You can use as a polyfill for devices that don’t support this functionality natively.



3.navigator.connection


if (navigator.connection.type==navigator.connection.WIFI) {


// code for WiFi connections (high-bandwidth)


}


4.window.devicePixelRatio



5.window.navigator.onLine 当前的网络状态



6.window.navigator.standalone 是否是全屏幕模式



7.Touch and Guesture Event



1).touch events(ios,Android2.2):touchstart,touchmove,touchend,touchcancel



2)gesture events(Apple only,ios 2+):guesturestart,guesturechange



8.Screen orientation



orientation event:portrait,landscape



9.Device orientation



10.devicemotion 用户shake或者move手机的时候触发



11.Media Capture API(Android only)










】【打印繁体】【投稿】【收藏】 【推荐】【举报】【评论】 【关闭】 【返回顶部
分享到: 
上一篇Linux驱动程序开发的简单休眠 下一篇Linux下运行程序后出现段错误的原..

评论

帐  号: 密码: (新用户注册)
验 证 码:
表  情:
内  容: