如何在移动设备上全屏显示图像,而不是在桌面上？

Question

我把图像告知我的网站正在建设中.这是一个800x600的图像,当您在桌面访问时,它会保持原始大小.这是页面中唯一的东西.

当人们从手机上访问它时,我想让它适合整个屏幕.怎么样？

<style type="text/css">
    body { background-color: #6BC5C5; }
</style>
<title>Size is being moved to another server</title>
<div style="margin: 0; padding: 0; left: 0; top: 0; border: 0; position: absolute;">
<img src="movedatacenter.jpg" alt="Under Maintenance" width="595" height="1021" align="left"></div>

Answer 1

您要使用的是媒体查询.使用媒体查询,您可以根据屏幕大小强制执行不同的CSS规则.

例如:

@media only screen and (max-width: 600px) {

    img#underconstruction {width: 100%; height: 100%; margin: 0; padding; 0;}
}

如果设备屏幕为600px或更小,那将强制一个具有underconstruction id的img进入全宽和高度.600是一个很好的尺寸,因为较新的iphone高度超过480.

此外,您还需要在具有以下元标记的移动设备上强制视口与1:1的比率:

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">