A, viewport label
Width - we do Mobile Web developers first need to wade in the river, because the debris pieces of mobile devices too serious. To Mobile Safari on the iPhone, for example, may be because Mobile Safari just after the request to the web page, assuming it is designed for a desktop browser web site (in fact, most mobile browsers are likely to think so). Thus Mobile Safari web width is assumed 980 pixels (different browsers may be different from default), while it is reduced in order to show all . If our website is designed specifically for the mobile terminal, then we need to tell the browser not to move to the default display width. Therefore, we need to use the viewport to modify the above code as follows:
<meta name="viewport" content="width=device-width">
m.yahoo.com the viewport settings
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
As can be seen, it prevents the user to zoom in on the page, if we change the configuration of the following
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
It can allow the user to use finger zoom the current page.
viewport property customized Android system
Android's official documentation (http://developer.android.com/reference/android/webkit /WebView.html) gives some special meta tag attributes, such as target-densitydpi. The main property is to allow developers to specify the current page which screen resolution is developed, also pointed out how to handle the media (such as picture scaling) and so on. as follows:
<meta name="viewport" content="target-densitydpi=device-dpi" />
[Note] strongly recommend that all need to engage Mobile Web site development engineers, read the Safari HTML References Apple provided (http://developer.apple.com/library/safari/documentation /AppleApplications/Reference/SafariHTMLRef/SafariHTMLRef.pdf) . there will be used as the default configuration rules specific width, viewport, and many other settings.
Second, the development environment kit list
SDK, emulator, simulator
- iOS SDK (XCode), best IDE emulator
- Android SDK
- Opera Mobile, the fastest simulator
- Opera Mini, a browser-based Java Applet simulator
- WP7 SDK
The above are just several of the mainstream, more full of see (http://www.mobilexweb.com/emulators)
Mixed Programming Tools
It is simply using HTML / CSS / JavaScript to generate applications while using these "packager" packaged as a native application. More famous
Mobile version of JavaScript libraries and frameworks
- Sencha Touch the most powerful, but also the most complex
- jQuery Mobile parent jQuery's surgeon, second only to the person
- Zepto optimized version of jQuery, to many browsers compatible, only modern browsers except for
- jQTouch is a lightweight tool
- YUI3 Needless to say, Yahoo! Produced, but the veteran style as before it
- Universal iPhone UI Kit for the iPhone UI framework to do
- iUI mainly used to make the list, it should be the first of a framework in this regard
- iWebkit do iPhone UI a very good tool
- iscroll good tool to make the ios TableView
See more of the framework (http://davidbcalhoun.com/2010/mobile-javascript-libraries-and-frameworks)
Third, think of a button
<!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>
View the HTML page in a browser, you can see that the first "Hyperlink button" when clicked, shows the normal style button is pressed, but the second showed no different styles and hyperlinks . This small flaws, some well-known products on the Internet appeared.
My experience is that when UI / UE design was handed over to developers, most developers think that if they enter the code that is consistent with the appearance of design work completed, so they ignore the actual product usability testing. If this product appears in the version formally launched in use, it only shows that the product developers do not use their products.
All in all, the button is a very important part in the Mobile Web design. Because of the ease of use of the button, so that the user frequently used functions, preferably with a button (or buttons variant controls) to achieve. Also, be sure to test the availability of your code, you do not think that if the product looks agreement has been completed with the design.
Fourth, the processing equipment of horizontal and vertical screen
We in the development of Mobile Web applications, best practice is to use a flow layout to ensure the greatest possible use of the limited screen space. Because of the directionality of the screen, the user switches the direction of the screen, some problems on the design or implementation will be prominent - at least we need to deal with what fit the width of the currently displayed element (of course, it may not only be done only this). Many times, we need a different orientation of the screen to display the corresponding application design patterns, this time, in real time, informed portrait mode status of the device becomes extremely important.
- window.orientation property and onorientationchange event
window.orientation : This property gives the current orientation of the device, 0 represents a vertical screen, the positive and negative 90 shows a cross-screen (left and right) pattern
onorientationchange : after each screen orientation switch between horizontal and vertical screen, the window will trigger event, similar to the usage and traditional events
1: callback function onorientationchange event to dynamically add attributes called orient to the body tag, while body [orient = landspace] or body [orient = portrait] manner css defined corresponding to the style so that it can achieve display different styles in different screen modes. The example code below:
<!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> content </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: a similar idea, not achieved by CSS attribute selectors, implementation of the following code:
<!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> content </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. Use media query mode
This is a more convenient way, using pure CSS to achieve the corresponding function, the following code demonstrates:
<!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> content </div> </body> </html>
4. graceful degradation low version of the browser
If the destination mobile browser does not support media query, while window.orientation does not exist, then we need another way to use the timer to achieve ---- contrast "pseudo-real-time" high (window.innerHeight) of the current window and width (window.innerWidth) ratio, so as to determine the current state of the horizontal and vertical screen. As shown in the following code:
<!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); }; was init = function () { updateOrientation(); window.setInterval(updateOrientation,5000); }; window.addEventListener("DOMContentLoaded",init,false); })(); </script> </head> <body> <div> content </div> </body> </html>
Unified solution
The integration of the above two solutions together, we can achieve a solution for cross-browser, the following code:
<!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(); }; was init = function () { updateOrientation(); if(supportOrientation){ window.addEventListener("orientationchange",updateOrientation,false); }else{ window.setInterval(updateOrientation,5000); } }; window.addEventListener("DOMContentLoaded",init,false); })(); </script> </head> <body> <div> content </div> </body> </html>
【原文】http://davidbcalhoun.com/2010/dealing-with-device-orientation
Reproduced in: https: //www.cnblogs.com/JoannaQ/archive/2012/10/12/2720763.html