如何在移動設備上全屏顯示圖像，但不在桌面上顯示？

我把圖片告知我的網站正在建設中。這是一張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>

來源

2013-02-15 PSyLoCKe

你想使用的是媒體查詢。使用媒體查詢，您可以根據屏幕大小實施不同的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">

來源

2013-02-15 14:21:45 BBagi

是的，這是最好的解決方案，+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。確保父元素也是窗口的寬度。

來源

2013-02-15 14:22:52 gimg1

您可以使用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樣式信息。

來源

2013-02-15 14:23:10

如何在移動設備上全屏顯示圖像，但不在桌面上顯示？

回答

相關問題