CSS lets picture width adaptive screen Example

Mobile Browsing Adaptive Web pages, Safari browser can often automatically identify and layout, picture width is filled with the screen, then how to do without the reader when the effect of this? As shown here, let the picture width fill up the screen.

Because the picture is inside a P tag and is markdown into HTML format, you need to add the style to the P tag dynamically using jquery.

CSS code:

Css

@media screen and (max-width:768px) {
. img-width{
margin:auto-15px;
}
}

Here CSS 3 Media query Adaptive phone screen.

JS Code:

<script type= "Text/javascript" >
$image = $ (". post-content img");
$image. Parent (' P '). addclass (' img-width ');
$image. addclass (' img-responsive center-block ');
</script>

This effect is achieved, run the Gulp command to compress CSS and JS files.

The 1px in the Web page is not the same as the 1px in the physical pixel, so the results are different on different phones, and the following settings are found to fit the current Web page to adapt to different mobile phones, different browsers, the code is as follows:

[HTML] View plain copy on the code to see a piece of a snippet derived from my Code

<meta name= "viewport" content= "width=620px,initial-scale=1,target-densitydpi=device-dpi,minimum-scale=1, Maximum-scale=1,user-scalable=1 "/>

The width=620px is the minimum width required for the content area of the Web page, the need for a full screen on different mobile phones, target-densitydpi=device-dpi settings, the 1px in the CSS will be equal to the physical pixel 1px.

Add: Because Safari browser does not support target-densitydpi=device-dpi, so add JS code automatically adjust the scale, adjust the code:

[HTML] View plain copy on the code to see a piece of a snippet derived from my Code

<style type= "Text/css" >
@viewport
{
zoom:1.0;
width:620px;
}
@-ms-viewport
{
width:620px;
zoom:1.0;
}</style>
<meta name= "viewport" id= webviewport "content=" width=620px,initial-scale=1,target-densitydpi=device-dpi, Minimum-scale=0.5,maximum-scale=1,user-scalable=1 "/>
<meta name= "apple-mobile-web-app-capable" content= "yes" >
<meta name= "Apple-mobile-web-app-status-bar-style" content= "Black" >
<meta name= "format-detection" content= "Telephone=no" >
<script language= "JavaScript" >
if (screen.width<620)
{
document.getElementById (' Webviewport '). setattribute (' content ', ' width=620px,initial-scale= ' + screen.width/620 + ', Target-densitydpi=device-dpi,minimum-scale=0.5,maximum-scale=1,user-scalable=1 ');
}
</script>