HTML＆CSS - 爲分辨率太低的用戶創建警告消息？

我的網站目前寬度太高，無法在800x600或更低的分辨率下查看。我想要做的是創建某種警告信息，因此當分辨率很低的人知道該網站將無法正常瀏覽時。最好是，我想讓一個黃色的欄像Internet Explorer一樣從頂部掉下來。HTML＆CSS - 爲分辨率太低的用戶創建警告消息？

如何使用HTML和CSS來做到這一點？如果你不能，請告訴我如何用其他語言做到這一點。

感謝

來源

2011-08-16 Callum

你真的不需要那樣做。您所需要的只是在啓用滾動的情況下設置頁面的最小寬度。 –

我基本上同意@Māris。如果我使用一個小視口，我需要的最後一件事是一個令人討厭的黃色酒吧，浪費了我珍貴的屏幕資源，尤其是。如果沒有什麼我可以做的。（順便提一句，這個問題本身就很好。） –

另外，現在他們將非常習慣現在的情況，現在有960個網格系統現在流行多年了 –

.yellowbar { 
    display: none; 
    position: fixed; 
    top: 0; 
    left: 0; 
    right: 0; 
    width: 100%; 
    height: 30px; 
    background: yellow; /* Use a better color */ 

    /* and so on... */ 
} 

@media screen and (max-width: 799px), screen and (max-height: 599px) { 
    .yellowbar { display: block; } 
}

請注意但是：舊版本的IE不支持媒體查詢。

如果你想使用jQuery，您可以使用以下命令：

var $window = $(window), $bar = $('.yellowbar'); 

$window.resize(function me() { 
    var small = $window.height() < 600 || $window.width() < 800; 

    $bar.css('display', small ? 'block' : 'none'); 

    return me; 
}());

這會明顯地，即使在舊版本的IE瀏覽器的工作。

來源

2011-08-16 11:06:43

機會是某人的分辨率低，會使用較舊的IE版本（或智能手機） –

@Scott：現在，它更可能是上網本，平板電腦，智能手機甚至電視機。 –

非常真實。不過，許多這些新興技術都支持CSS3，因此也支持媒體查詢。 –

不檢查分辨率，檢查視口大小。瀏覽器窗口可以調整大小。

Get the browser viewport dimensions with JavaScript應該讓你開始。如果視口太小，請輸出所需的HTML。

來源

2011-08-16 11:08:29 Stijn

我會使用Javascript或JQuery而不是這個。

var width = $(window).width(); 
var height = $(window).height(); 
if (width < 800 || height < 600) { 
    alert("Your monitor is from the dark ages."); 
}

來源

2011-08-16 11:09:47 JordanC

*您的顯示器來自黑暗時代*或*升級到Netscape 4 *，根據您的喜好;-P –

您可能想用「||」替換「&&」如果分辨率不夠寬*或*不夠高 – xec

好點已經調整過了。 – JordanC

HTML＆CSS - 爲分辨率太低的用戶創建警告消息？

回答

相關問題