如何在移动设备上全屏显示图像，但不在桌面上显示？

问题描述：

我把图片告知我的网站正在建设中。这是一张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>

答

你想使用的是媒体查询。使用媒体查询，您可以根据屏幕大小实施不同的CSS规则。

例如：

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

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

这将迫使与underconstruction的id一个img去充分的宽度和高度，如果设备屏幕为600像素或更小。 600是一个很好的大小，因为新的iPhone拥有更大的高度超过480

此外，你需要强制视口以1：在移动设备1的比例用下面的meta标签：

<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">

是的，这是最好的解决方案，+1 – 2013-02-15 14:23:55

以及如果我的图片需要垂直滚动，我可以使用height：*;而不是100％？ – PSyLoCKe 2013-02-15 15:13:09

@EASI如果图像太高，设备将垂直滚动。我不知道什么高度：*是。 – BBagi 2013-02-15 15:16:04

答

设置与以下图像的风格：

width: 100%; 
height: 100%; 
max-width: 800px; 
max-height: 600px;

这将扩大图像的大小父达为800x600。确保父元素也是窗口的宽度。

答

您可以使用CSS媒体查询本

@media all and (max-width: 768px) { 
/* 768px is usually the width of tablets in portrait orientation */ 
/* You can use any other size you see fit */ 

    img {width: 100%;} 
}

这将只适用于当宽度是在给定的max-width样式信息。

如何在移动设备上全屏显示图像，但不在桌面上显示？

相关推荐