0

我有这个 html：http: //jsfiddle.net/nsabu/

<!doctype html>
<html lang="en">
<head>
    <style>
    html, body, img {
        height: 100%;
    }
    body {
        padding: 0;
        margin: 0;
    }
    </style>
</head>

<body>
    <img src="https://s3.amazonaws.com/dev.storage.mediabox.io/1/_content/664536771c9060e8459805d4ed7103fa-40/198-40_100_2.jpg?AWSAccessKeyId=ASIAJNMOEPRUOJXCJJ5Q&Expires=1356669400&Signature=Su6bomRoQ8FT6yllzIzPGGyaqWU%3D&x-amz-security-token=AQoDYXdzENr%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEa0AFP2Myc69na3yO7inJ7d9KqZwS620cUDmdLiSIQmtR3wrgxetmy1N3JNCVAdz1mOTqqwKiKpPXY5dVf0OxTBY%2BLUoAovSz9OjUojB0JQlXqMVeNbAzhq723O32OZR08l6F2S0oyIOgwjr%2FGkzj2JhNunzfido49SdTjEiX2p5WozIVODRqnxkqrXrDL4z1vMunQkivQ8U2VKlL4s8z3mEwd3tvWUaOu0%2B%2BUFvHiGH23V05pXQEnZnlLKQ%2B6NNwmmp2Rt5EsmMvvTJi4CYbjM6cJIJjP7IYF" />
</body>
</html>

当我在 chrome 上运行它时，我得到了 100% 的图像高度。当我用 chrome 在平板电脑或手机上运行它时，浏览器会忽略 100% 的高度。问题是什么？如何告诉 chrome 移动浏览器考虑高度？

4

2 回答 2

3

试试height: 100vh;吧（CSS3，所有浏览器都支持）。或许能解决你的烦恼。有关更多信息，请参见此处：https ://stackoverflow.com/a/16837667

于 2014-12-04T10:29:37.640 回答
1

添加视口标签

<!doctype html>
<html lang="en">
<head>
    <meta name="viewport" content="initial-scale=1"/>
    <style>
    html, body, img {
        height: 100%;
    }
    body {
        padding: 0;
        margin: 0;
    }
    </style>
</head>

<body>
    <img src="https://s3.amazonaws.com/dev.storage.mediabox.io/1/_content/664536771c9060e8459805d4ed7103fa-40/198-40_100_2.jpg?AWSAccessKeyId=ASIAJNMOEPRUOJXCJJ5Q&Expires=1356669400&Signature=Su6bomRoQ8FT6yllzIzPGGyaqWU%3D&x-amz-security-token=AQoDYXdzENr%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEa0AFP2Myc69na3yO7inJ7d9KqZwS620cUDmdLiSIQmtR3wrgxetmy1N3JNCVAdz1mOTqqwKiKpPXY5dVf0OxTBY%2BLUoAovSz9OjUojB0JQlXqMVeNbAzhq723O32OZR08l6F2S0oyIOgwjr%2FGkzj2JhNunzfido49SdTjEiX2p5WozIVODRqnxkqrXrDL4z1vMunQkivQ8U2VKlL4s8z3mEwd3tvWUaOu0%2B%2BUFvHiGH23V05pXQEnZnlLKQ%2B6NNwmmp2Rt5EsmMvvTJi4CYbjM6cJIJjP7IYF" />
</body>
</html>
于 2012-12-26T17:08:01.393 回答