一、viewport标签
宽度——我们做Mobile Web开发的第一个需要趟的河，因为移动设备的碎片片太严重了。以iPhone上的Mobile Safari为例，可能是因为Mobile Safari在请求到刚才的网页后，假设它是一个为桌面浏览器设计的网站（实际上可能大多数移动浏览器都是这样认为的)。因此Mobile Safari假设网页宽度是980像素（不同的浏览器可能默认不同），同时将其缩小以便全部显示。如果我们的网页是专门为移动终端设计的，那么我们就需要 告诉移动浏览器不要以默认的宽度来显示。因此，我们需要使用viewport.对以上代码进行修改,如下：
<meta name="viewport" content="width=device-width">
m.yahoo.com的viewport设置
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
可以看出，它阻止用户对网页进行缩放操作，如果我们将配置改为下面的
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
就可以允许用户使用手指缩放当前的网页了。
定制化Android系统的viewport属性
Android的官方文档(http://developer.android.com/reference/android/webkit /WebView.html)中列举了一些特别的元标签属性，比如target-densitydpi. 这个属性主要是允许开发者指定当前网页是为哪种屏幕分辨率而开发的，同时也指出了如何处理媒体（如图片的缩放）等。如下：
<meta name="viewport" content="target-densitydpi=device-dpi" />
【注】强烈建议所有需要从事Mobile Web网站开发的工程师们，阅读Apple提供的Safari HTML References(http://developer.apple.com/library/safari/documentation /AppleApplications/Reference/SafariHTMLRef/SafariHTMLRef.pdf).里面会有如默认宽 度，viewport设置等诸多的具体配置使用细则。
二、开发环境套件一览
SDK，仿真器，模拟器
- iOS SDK(XCode), 最好的IDE与仿真器
- Android SDK
- Opera Mobile,最快的仿真器
- Opera Mini ， 一个基于Java Applet的浏览器模拟器
- WP7 SDK
以上只是列举了主流的几款，更全的参见（http://www.mobilexweb.com/emulators）
混合编程工具
很简单，就是使用HTML/CSS/JavaScript来生成应用，同时将其使用这些“打包器”包装成一个本地应用。比较有名的有
移动版JavaScript库与框架
- Sencha Touch 最强大的，但也是最复杂的
- jQuery Mobile jQuery之父操刀的，仅次于上者
- Zepto 优化版本的jQuery,去除了很多浏览器兼容的，只针对现代浏览器
- jQTouch 很轻巧的一个工具
- YUI3 不用说，Yahoo!出品，但老将风采不如以前了呀
- Universal iPhone UI Kit 用来做iPhone UI的框架
- iUI 主要用来做列表的，应该是最早的一个这方面的框架
- iWebkit 做iPhone UI很不错的一个工具
- iscroll 制作ios TableView的好工具
更多的框架参见（http://davidbcalhoun.com/2010/mobile-javascript-libraries-and-frameworks）
三、由按键想到的
<!Doctype html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width;initial-scale=1.0" <title>按键</title> <style type="text/css"> #container { margin: 0 200px; } .button { -moz-border-bottom-colors: none; -moz-border-image: none; -moz-border-left-colors: none; -moz-border-right-colors: none; -moz-border-top-colors: none; background-color: #F2F7FA; border-color: #D9D9D9 #A9A9A9 #A9A9A9 #D9D9D9; border-left: 1px solid #D9D9D9; border-radius: 4px 4px 4px 4px; border-style: solid; border-width: 1px; display: block; padding: 0.5em; text-align: center; } a { text-decoration:none; } </style> </head> <body> <div id="container"> <p> <a class="button" href="#">More</a> </p> <div class="button"> <a href="#">More</a> </div> </div> </body> </html>
在浏览器中查看这个HTML页面，就可以看到，第一个"超链接按键"在点击的时候，显示的是正常按钮被按下的样式，但第二个的显示风格与超链接无异。这点小瑕疵，在一些著名的互联网产品中就出现过。
我的经验是，当UI/UE设计方案被移交给开发者后，大部分的开发者会认为，如果他们的代码输入与设计方案外观一致就是工作完成了，于是他们就忽略了对于 实际产品的可用性测试。如果这个产品出现在了正式上线使用的版本中，那只能说明这个产品的开发人员没有使用自己的产品。
总而言之，按钮在Mobile Web设计中是相当重要的一部分。因为按钮的易用性，所以那些用户使用频率高的功能，最好是用按钮（或按钮的变种控件)来实现。同时，一定要测试自己的代码的可用性，千万不要认为如果产品看上去与设计方案一致就已经完成。
四、处理设备的横竖屏
我们在开发Mobile Web应用时，一个最佳实践就是采用流式布局，保证最大可能地利用有限的屏幕空间。由于屏幕存在着方向性，用户在切换了屏幕的方向后，有些设计上或实现上 的问题就会凸显——我们至少需要处理一下当前显示元素的宽度的适配（当然，要做的可能不仅仅是这个）。很多时候，我们需要为不同的屏幕方向来设计对应的应 用显示模式，这个时候，实时地获知设备的模竖屏状态就显得极为重要。
- window.orientation属性与onorientationchange事件
window.orientation :这个属性给出了当前设备的屏幕方向，0表示竖屏，正负90表示横屏（向左与向右）模式
onorientationchange : 在每次屏幕方向在横竖屏间切换后，就会触发这个window事件，用法与传统的事件类似
1：使用onorientationchange事件的回调函数，来动态地为body标签添加一个叫orient的属性，同时以 body[orient=landspace]或body[orient=portrait]的方式在css中定义对应的样式，这样就可以实现在不同的屏 幕模式下显示不同的样式。如下代码示例：
<!Doctype html> <html> <head> <meta charset="utf-8"> <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;"> <title>横竖屏切换检测</title> <style type="text/css"> body[orient=landscape]{ background-color: #ff0000; } body[orient=portrait]{ background-color: #00ffff; } </style> </head> <body orient="landspace"> <div> 内容 </div> <script type="text/javascript"> (function(){ if(window.orient==0){ document.body.setAttribute("orient","portrait"); }else{ document.body.setAttribute("orient","landscape"); } })(); window.onorientationchange=function(){ var body=document.body; var viewport=document.getElementById("viewport"); if(body.getAttribute("orient")=="landscape"){ body.setAttribute("orient","portrait"); }else{ body.setAttribute("orient","landscape"); } }; </script> </body> </html>
2: 类似的思路，不通过CSS的属性选择器来实现，如下代码的实现方案：
<!Doctype html> <html> <head> <meta charset="utf-8"> <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;"> <title>横竖屏切换检测</title> <style type="text/css"> .landscape body { background-color: #ff0000; } .portrait body { background-color: #00ffff; } </style> </head> <body orient="landspace"> <div> 内容 </div> <script type="text/javascript"> (function(){ var init=function(){ var updateOrientation=function(){ var orientation=window.orientation; switch(orientation){ case 90: case -90: orientation="landscape"; break; default: orientation="portrait"; break; } document.body.parentNode.setAttribute("class",orientation); }; window.addEventListener("orientationchange",updateOrientation,false); updateOrientation(); }; window.addEventListener("DOMContentLoaded",init,false); })(); </script> </body> </html>
3.使用media query方式
这是一种更为方便的方式，使用纯CSS就实现了对应的功能，如下代码演示：
<!Doctype html> <html> <head> <meta charset="utf-8"> <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;"> <title>横竖屏切换检测</title> <style type="text/css"> @media all and (orientation : landscape) { body { background-color: #ff0000; } } @media all and (orientation : portrait){ body { background-color: #00ff00; } } </style> </head> <body> <div> 内容 </div> </body> </html>
4.低版本浏览器的平稳降级
如果目标移动浏览器不支持media query，同时window.orientation也不存在，则我们需要采用另外一种方式来实现————使用定时器“伪实时”地对比当前窗口的高 (window.innerHeight)与宽(window.innerWidth)之比，从而判定当前的横竖屏状态。如下代码所示：
<!Doctype html> <html> <head> <meta charset="utf-8"> <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;"> <title>按键</title> <style type="text/css"> .landscape body { background-color: #ff0000; } .portrait body { background-color: #00ffff; } </style> <script type="text/javascript"> (function(){ var updateOrientation=function(){ var orientation=(window.innerWidth > window.innerHeight)? "landscape" : "portrait"; document.body.parentNode.setAttribute("class",orientation); }; var init=function(){ updateOrientation(); window.setInterval(updateOrientation,5000); }; window.addEventListener("DOMContentLoaded",init,false); })(); </script> </head> <body> <div> 内容 </div> </body> </html>
统一解决方案
将以上的两种解决方案整合在一起，就可以实现一个跨浏览器的解决方案，如下代码：
<!Doctype html> <html> <head> <meta charset="utf-8"> <meta id="viewport" name="viewport" content="width=device-width,initial-scale=1.0;"> <title>横竖屏切换检测</title> <style type="text/css"> .landscape body { background-color: #ff0000; } .portrait body { background-color: #00ffff; } </style> <script type="text/javascript"> (function(){ var supportOrientation=(typeof window.orientation == "number" && typeof window.onorientationchange == "object"); var updateOrientation=function(){ if(supportOrientation){ updateOrientation=function(){ var orientation=window.orientation; switch(orientation){ case 90: case -90: orientation="landscape"; break; default: orientation="portrait"; } document.body.parentNode.setAttribute("class",orientation); }; }else{ updateOrientation=function(){ var orientation=(window.innerWidth > window.innerHeight)? "landscape":"portrait"; document.body.parentNode.setAttribute("class",orientation); }; } updateOrientation(); }; var init=function(){ updateOrientation(); if(supportOrientation){ window.addEventListener("orientationchange",updateOrientation,false); }else{ window.setInterval(updateOrientation,5000); } }; window.addEventListener("DOMContentLoaded",init,false); })(); </script> </head> <body> <div> 内容 </div> </body> </html>
【原文】http://davidbcalhoun.com/2010/dealing-with-device-orientation
转载于:https://www.cnblogs.com/JoannaQ/archive/2012/10/12/2720763.html