很多pc端的页面仔想去编写wap端的页面,但是又因为对可能出现的问题有恐惧的心理而不敢出手?
pc和wap的网站虽然有很多差异,但是我们完全不用产生距离感,只要掌握一些主要问题的解决方案,大胆动手去做就好了。
这里介绍一套《HTML5移动Web开发实践》对wap的一些处理方案。
先下载这套代码和示例
https://github.com/h5bp/mobile-boilerplate
说明里面有对这个demo的说明
Mobile browser optimizations.
CSS normalizations and common bug fixes.
The latest jQuery.
A custom Modernizr build for feature detection and a polyfill for CSS Media Queries.
Home page icon for Android, iOS, Nokia, Firefox
Cross-browser viewport optimization for Android, iOS, Mobile IE, Nokia, and Blackberry.
Open Web App support for Firefox for Android and Firefox OS
Better font rendering in Mobile IE.
iPhone web app meta.
INSTANT button click event.
Textarea autogrow plugin.
Hide URL bar method.
Prevent form zoom onfocus method.
Mobile site redirection.
User Agent Detection.
An optimized Google Analytics snippet.
Apache server caching, compression, and other configuration defaults for Grade-A performance.
Cross-domain Ajax.
“Delete-key friendly.” Easy to strip out parts you don’t need.
Extensive inline and accompanying documentation.
对我们比较有用的有(不是按照上面顺序的哦):
移动浏览器的优化;
协助低版本浏览器兼容HTML5、CSS3的Modernizr(如果你是纯移动端开发者可以不考虑modernizr;
跨浏览器的视图优化;
更好的字体渲染;
点击事件的优化;
跨域ajax等。
当你了解并可以熟练使用上述功能后,wap浏览器的开发就是纸老虎了;)