css讓圖片寬度自適應螢幕的例子

手機瀏覽自適應網頁，Safari瀏覽器往往能自動識別並排版，圖片寬度是佔滿螢幕的，那麼在不用閱讀器的時候如何做成這樣的效果呢？如圖，這裡要讓圖片寬度佔滿螢幕。

因為圖片是在一個p標籤內，而且是Markdown轉換成html格式的，所以需要用jquery動態把樣式加給這個p標籤。

css代碼：

CSS

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

這裡用CSS 3媒體查詢自適應手機螢幕。

JS代碼：

<script type="text/javascript">
    $image = $(".post-content img");
    $image.parent('p').addClass('img-width');
    $image.addClass('img-responsive center-block');
</script>

這樣效果就實現了，運行gulp命令重新壓縮css和js檔案。

在網頁中設定的1px與物理像素中的1px不會相同，所以導致不同在不同手機上顯示結果都不相同，通過以下設定找到了適合當前網頁自適應不同手機、不同瀏覽器的辦法，代碼如下：

[html] view plain copy 在CODE上查看代碼片派生到My Code片

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

其中的width=620px就是網頁內容區需要的最小寬度，需要在不同手機上剛好全螢幕顯示，target-densitydpi=device-dpi設定後，css中的1px就會等於物理像素中的1px。

補充：由於safari瀏覽器不支援target-densitydpi=device-dpi，所以加入JS代碼自動調整縮放比例，調整後的代碼：

[html] view plain copy 在CODE上查看代碼片派生到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>