手机移动网站自适应高度，手机网页图片自适应大小

来源：互联网发布：spark sql 官网编辑：程序博客网时间：2024/04/30 08:49

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><!-- xuewei.net Baidu tongji analytics --><script>var _hmt = _hmt || [];(function() {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?00c696d58ba23e895e2c67222462f70b";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script><script>var _hmt = _hmt || [];(function() {  var hm = document.createElement("script");  hm.src = "https://hm.baidu.com/hm.js?7bb8a0b1631edc25dd311f1dfba9a8fa";  var s = document.getElementsByTagName("script")[0];   s.parentNode.insertBefore(hm, s);})();</script><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>    <title>博文思MBA录取中心(mbayd2)</title>    <meta name="keywords" content="">    <meta name="description"          content="">    <!--    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">    -->    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />        <link href="http://xuewei.net/statics/css/bowensi/common.css" rel="stylesheet" type="text/css"/>    <link href="http://xuewei.net/statics/css/bowensi/main.css" rel="stylesheet" type="text/css"/>    <script src="http://xuewei.net/statics/js/bowensi/jquery-1.7.2.js"></script>    <script src="http://xuewei.net/statics/js/bowensi/pptBox.js"></script>    <script>        window.onload = function () {            seajs.use("slide.js", function (slide) {                slide.slide();            });        };    </script>    <!-- xuewei.net/z_zhuan Baidu tongji analytics -->    <style>        .img-responsev {            max-width: 100%;height:auto;            display: block;            margin: 0 auto;        }        .fixed-bottom {            position: fixed;            bottom: 0px;            left: 0;            right: 0;        }        .fixed-bottom .left {            float: left;            width: 50%;        }        .fixed-bottom .right {            float: left;            width: 50%;        }    </style>    <!-- bws3.mbdedu.com Baidu tongji analytics --></head><body><!--头部Begin--><div align="center"><a onclick="doyoo.util.openChat('g=10066458');return false;"><img src="http://www.xuewei.net/mbayd2/images/1.jpg" width="750" height="983" class="img-responsev"/><img src="http://www.xuewei.net/mbayd2/images/guodu.png" width="750" height="40" class="img-responsev"/><img src="http://www.xuewei.net/mbayd2/images/7.jpg" width="750" height="1247" class="img-responsev"/><img src="http://www.xuewei.net/mbayd2/images/4.jpg" width="750" height="772" class="img-responsev"/><img src="http://www.xuewei.net/mbayd2/images/10.jpg" width="750" height="329" class="img-responsev"/></a></div><br><br><p style="margin: 0 auto;height: 30px;line-height: 30px;color: #333;text-align: center;">北京博文思教育咨询中心 ，未经授权，不得转载本站内所有信息。</p><script type="text/javascript" charset="utf-8" src="http://lead.soperson.com/20002113/10074814.js"></script><script type="text/javascript">    $(document).ready(function () {        $("#PCMSAD_69_0").attr('style', 'left: 10px; top: 80px; width: 120px; height: 270px; position: absolute; z-index: 888888;');        $("#PCMSAD_69_1").attr('style', 'right: 10px; top: 80px; width: 140px; height: 215px; position: absolute; z-index: 888888;');    })</script></body></html>

如果宽要全部显示，就设置为width:100%,height:auto，反之就设置为width:auto, height:100%

在网页的<head>中添加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度。

其中：

width=device-width ：表示宽度是设备屏幕的宽度

initial-scale=1.0：表示初始的缩放比例

minimum-scale=0.5：表示最小的缩放比例

maximum-scale=2.0：表示最大的缩放比例

user-scalable=yes：表示用户是否可以调整缩放比例

如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是：