!!! Mobile Web Development

Mobile article:

@media screen and (min-width:540px) {#news_detail. pinglun-form {margin:0 auto;width:540px;}}
@media screen and (max-width:540px) {#news_detail. pinglun-form {margin:0 auto;width:540px;}}
@media screen and (max-width:320px) {#news_detail. pinglun-form {margin:0 auto;width:320px;}}

<link rel= "stylesheet" type= "text/css" media= "screen and (max-width:479px)" href= "Css479.css"/> The sample code represents when the current display width is less than 479PX, load the Testcssbywidth1.css file to render the page.

Direct settings in CSS:
@media screen and (max-width:479px) {
/* Specific CSS property settings */
}

<meta name= "viewport" content= "width=device-width,initial-scale=1.0, MAXIMUM-SCALE=1.0,MINIMUM-SCALE=1.0,USER-SCALABLE=NO,TARGET-DENSITYDPI=DEVICE-DPI "> (Force display of true resolution size)

Width=device-width: Controls the width of the viewport, you can specify fixed values or special values, such as device-width (device width). But this is set to have a disadvantage, because this setting only in the vertical state of the active, Horizontal screen state, the return is still the same width as the vertical screen state. initial-scale=1.0: tells the browser not to perform any scaling on the page when initializing the page. maximum-scale=1.0: Tell the browser to prevent the page from zooming in, but this also prevents the user from manually zooming in or out of the page, how to say, good things will be flawed. minimum-scale=1.0: Tell the browser to prevent the page from shrinking, which also brings up the problem. User-scalable=no: tells the browser to disallow page scaling. TARGET-DENSITYDPI=DEVICE-DPI: The setting of the resolution, usually can be value: device-dpi (using the device's own DPI as the target DP, no scaling), high-dpi (using high-resolution, medium and low-resolution scenarios will be reduced accordingly), MEDIUM-DPI (with the medium resolution, the corresponding magnification and reduction of the high and low resolution respectively, the default), LOW-DPI (use low resolution, the medium and higher resolution corresponding amplification). By setting the viewport, you can make a responsive web page with the media queries's property settings. Let's start by telling you step-by-step how the Responsive web design begins: Allow Web page width to be automatically adjusted: the definition of viewport meta is appended to the page. Choose a standard to develop a specific page: for example, a page is required to screen width of 320px, 480px, 640px Three scenarios under the responsive design, this time normal will choose 320px under the standard first page development. Extract the CSS style from the lowest standard independently into the chain style file: The CSS styles under 320px are all extracted into the chain style file, the responsive design of the page HTML code, do not have any CSS definition of code. Other standard CSS style file development according to Uedmms's visual manuscript. The Media queries property settings are defined to load different CSS style files under different scenarios.
http://blog.csdn.net/iamjiuye/article/details/11608927

How to adapt to high-resolution large-screen mobile phone:

Write a webpage according to 540px. Add one more sentence (auto-scaling):

// adapt to high resolution mobile $ (window). On ("Resize load",function() {    $ ("body"). CSS ("Zoom", $ (window). Width ()/540);    $ ("body"). CSS ("Display", "block");});

"Narrator"
This period of time in the application of embedded Web pages, the embedded Web page is always scaled, very annoying. After adding this sentence to the Android engineer: Websettings.setsupportzoom (false); is still being scaled. (such as 540 wide mobile phone, the page width is 345px)-Continue to worry!<meta name= "viewport" content= "width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0, USER-SCALABLE=NO,TARGET-DENSITYDPI=DEVICE-DPI "> (plus this sentencetarget-densitydpi=device- dpi can force display of true resolution Size) page all font size, only according to a certain width to do. For example, the design of the page width of 540, all press 540px transduction do the page, regardless of other resolution of the adaptive.
Plus this code, and then all the different resolutions of the phone, are scaled by 540px:$ (window). Bind ( ' Resize load ', function () {$ ("body"). CSS ("Zoom", $ (window). Width ()/540); $ ("Body"). CSS ("Display", "block");}); Solved the big screen mobile phone high resolution, the font too small problem. And transduction also do not have to consider a variety of different resolutions of the CSS, all press support only 540px to do enough! 

var screenwidth=$ (document). width ();