手機網頁寬度 ， 圖片寬度 自適應

標籤：寬度   手機網頁   自適應   

網頁寬度

頁面box不要寫寬度或 width:100% 之類的 去掉

頭部加上下面代碼：

 <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />

     

圖片寬度

 <script type="text/javascript">

        function init() {

            var jian = 30;           

            var w = document.body.clientWidth - jian;

            var pic = document.getElementsByTagName("img");

            for (var i = 0; i < pic.length; i++) {

                var width1 = pic[i].width;

                var height1 = pic[i].height;

                if (width1>w) {

                pic[i].width = w;

                pic[i].height = height1 * w / width1;

            }

            }

        }

</script>