【html5移动web开发】关于移动端开发

1.Google Analytics分析工具的使用:注册后页面中加入Google Analytics的代码,可以分析出有哪些设备在访问网站或者哪些页面访问量比较大、

2.Modernizr 可以检测浏览器对html5元素的支持性。可以判断是否支持localstorage等等

3.html5元素在旧版本的IE浏览器下显示为块级元素   article,aside,nav,section{ display:block;}

4.PC端采用固定布局与流体布局,而在移动网站中我们始终使用流体布局,它可以使你的网站适应不同的设备尺寸。

 比如:竖屏下显示一列,横屏下显示2列(合理利用每个像素)

5.清除html5元素的默认样式

 article,aside,section……{ margin:0; padding:0;border:0;font-size:100%;font:inherit; vertical-align:baseline;}

6.页面重置字体大小:-webkit-text-size-adjust:none;

         -webkit-text-size-adjust:none;如果在Pc桌面访问,或者通过其他的非移动设备的浏览器访问,会导致页面的缩放功能会被禁用。

         IPhone:  html{-webkit-text-size-adjust:100%;}

         微软  html{-ms-text-size-adjust:100%;}

7.媒介查询(media query)

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

8.同一个局域网下,可以使用XAMPP配置移动开发环境(本地网站服务),确认电脑和移动设备是在同一无线网络中。通过IP地址即可以访问

9.如果你的主要用户使用iphone和移动版safari,在桌面电脑上测试可以节约很多时间。打开safari,偏好设置---高级栏---开发---用户代理---Mobile safari 3.1.3-IPhone

10.通过界面图标启动web应用

   Retina屏幕采用114*114的图标

  <link rel=‘apple-touch-icon-precomposed‘ sizes=‘114*114‘ href=‘apple-touch-icon-114*114-precomposed.png‘>

ipad使用72*72的图标

  未使用Retina屏幕的的IPhone和Android 2.1以上版本的设备,使用57*57的图标

   对于诺基亚塞班的设备,一个快捷键图标只是用来告诉移动设备这个图标的位置。

  <link rel=‘shortcut icon‘ href=‘img/1/apple-touch-icon.png‘>

时间: 2024-12-23 14:03:56

【html5移动web开发】关于移动端开发的相关文章

迅为嵌入式-iTOP-4418/6848开发板 高端开发平台

iTOP-6818开发板是一款四核ARM 八核开发板与iTOP-4418开发板完全兼容,CPU主频1.4GHz,内存1GB DDR3(2GB可选),存储16GB EMMC,板载千兆以太网,GPS,WIFI蓝牙,陀螺仪等模块,同时支持3G模块,4G模块.可适用于智能家居.医疗.媒体.车载.手持设备.通讯等行业. 核心板参数 尺寸 50mm*60mm 高度 核心板连接器为1.5mm CPU ARM Cortex-A9 四核 S5P4418处理器 1.4GHz 内存 1GB DDR3(2GB可选) 存

29.html5 移动端开发总结

手机与浏览器 浏览器: 移动端开发主要针对手机,ipad等移动设备,随着地铁里的低头族越来越多,移动端开发在前端的开发任务中站的比重也越来越大.各种品牌及尺寸的手机也不尽相同.尺寸不同就算了分辨率,视网膜屏 自动的各种内核的浏览器,想想头都大了. 先说下浏览器.在中国有多少种浏览器? ie.百度.360.搜狗.火狐.欧朋.Chrome.谷歌.行者无疆.财猫省钱.遨游.Wise光速.UC.智慧.QQ.海豚...(大概有70-80多种) 五花八门,还好不用担心这都是表象.虽然浏览器各不相同但从浏览器

HTML5移动Web开发实战 PDF扫描版?

<HTML5移动Web开发实战>提供了应对这一挑战的解决方案.通过阅读本书,你将了解如何有效地利用最新的HTML5的那些针对移动网站的功能,横跨多个移动平台.全书共分10章,从移动Web.设备端配置和优化,变互.响应式设计.设备访问,调试.性能测试.富媒体等角度出发,包含了60多个实用的示倒,详细阐释如何构建快速.响应式的HTML5移动网站,适用于iOS.Android.WindowsPhone和BlackBerry等众多主流移动应用平台.  <HTML5移动Web开发实战>作者是

web前端之html5开发中常用的开发工具

正所谓“工欲善其事,必先利其器”,对Web开发人员来说,好工具的使用总会给人带来事半功倍的效果.正准备学习HTML5或者已经进行了一段时间的HTML5开发的童鞋,都有必要了解下,HTML5都有哪些开发工具,哪款开发工具更适合我?下面就一一盘点下: 一.HTML5全栈开发工具之Adobe Dreamweaver 首先是大名鼎鼎的Adobe Dreamweaver,Adobe Dreamweaver 软件使设计人员和开发人员能充满自信地构建基于标准的网站.由于同新的 Adobe CS Live 在线

我在MDCC 2015的演讲PPT《HTML5移动应用多端开发架构实践》分享

这是我在MDCC 2015中国移动开发者大会发表的"HTML5移动应用多端开发架构实践"的演讲ppt,最近又有人要ppt,放在这里吧,欢迎下载! http://download.csdn.net/detail/tangxiaoyin/9196653

web移动端开发技巧与注意事项汇总

一.meta的使用 1.<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 强制让文档的宽度与设备的宽度保持1:1,并且文档最大的宽度比例是1.0,且不允许用户点击屏幕放大浏览 2.winphone系统a.input标签被点击时产生的半透明灰色背景怎么去掉

web前端开发与iOS终端开发的异同[转]

* {-webkit-tap-highlight-color: rgba(0,0,0,0);}html {-webkit-text-size-adjust: none;}body {font-family: Arial, Helvetica, sans-serif;margin: 0;color: #333;word-wrap: break-word;}h1, h2, h3, h4, h5, h6 {line-height: 1.1;}img {max-width: 100% !importan

关于近期对于移动端开发的一些看法

首先移动端开发最基本的就是尺寸问题: <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> 这行代码是肯定知道要加的,但是我们还会面临在不同尺寸的屏幕上对应尺寸的大小变化.对于这个问题我之前看过很多网站对于这个的处理,我主要是采用小米官网对于这个的修改,单位

移动端开发:使用jQuery Mobile还是Zepto

原:http://blog.csdn.net/liubinwyzbt/article/details/51446771 jQuery Mobile和Zepto是移动端的js库.jQuery Mobile相当于PC端的jQuery UI,它提供了很多页面的UI库,能够很快的开发出漂亮的界面,适合公司没有UI设计师的前端开发人员来进行移动端的开发.Zepto相当于PC端的jQuery,它提供了很多方法和功能,能够很快的实现各种需求和功能,适合公司有UI设计师的前端开发人员来进行移动端的开发. jQu

移动端开发注意事项

移动端开发中需要注意的事项,以及可能需要用到一些框架,尾部总结了一些主流框架,如果你觉得有用的话,请点击推荐,谢谢! 一.关于meta 常见的公共meta属性: 1.viewport <meta  name="viewport"  content="width-device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0"> width=device-