Mac Book的Retina高清顯示屏下頁面顯示與固定寬度問題

問題：有一個佈局以下所示

這個佈局是按照1920px的顯示屏寬度進行設計的，一整個頁面只顯示這個，沒有滾動條。可是，這個頁面在Mac Book的windows系統下顯示時，登陸按鈕超過了一頁高度，移動了頁面以外，因爲沒有滾動條，所以無法點擊到登陸按鈕了。

分析緣由：當初進行頁面佈局時，是按照設計稿的尺寸來的。這個頁面主要由如圖所示幾個尺寸組成

Logo的上邊距（Margin-top）、Logo自己的高度、Logo的下邊距、以及登陸信封的高度。假設以上4個的高度分別是130px、80px、80px、520px，那這個頁面所須要的最小高度則爲：130+80*2+520=810px。若是一個顯示器是小屏的，它的高度（瀏覽器的高度，屏幕高度的分辨率減去工具欄、底部圖標區等）小於810px，那麼就沒法徹底顯示這個頁面。也就是說，不須要是Mac Book筆記本，任何電腦，當它的高度小於810px 時都會出現問題，因此，這樣的佈局是存在問題的。

備註：咱們通常是不考慮顯示器高度對頁面的影響的，只會考慮寬度對佈局的影響。所以任何頁面都會有上下拉的滾動條，而左右拉動的滾動條則是咱們沒法接受的。因此，咱們一般不會考慮高度對佈局的影響。這裏之因此考慮高度的影響，是由於這個頁面是沒有滾動條的，背景圖佔據整個頁面。因此，當你設計一個沒有滾動條的頁面時，顯示器高度對佈局的影響你切記要考慮進去了。

解決方法：實際上沒有特別好的解決方法。最好的方法是這樣的，無論瀏覽器的高度是多少，所要顯示的內容都能垂直居中。但顯然，margin值能夠隨着瀏覽器高度改變而改變，可是圖片的高度是固定的，當瀏覽器的高度比展現內容最小的高度（即去除了任何邊距邊框等，只是內容自己的高度）還要小時，仍然會出現上述問題。因此，最好是圖片的大小也能隨着瀏覽器的高度不斷的變化，包括文字的大小、按鈕的大小等。可是，垂直居中始終是佈局中一個難題，這點網上不少帖子都有說明。目前來講，最好的垂直居中方案是流式佈局（Flex），能夠比較完美的實現垂直居中，或者經過絕對定位。但高度變化狀況下讓圖片自適應改變尺寸又是比較難的問題。由於，一般圖片自適應是：

img{
max-width:100%;
height:auto;
}

可是，咱們不多有限制高度的吧，因此怎麼去定義這個max-height呢？比較煩。

問題沒解決，可是先來講說，這個問題又怎麼和Mac的Retina的高清屏扯上關係的呢。

Mac電腦採用的是一種叫作Ritina的高清顯示屏，它的分別率比通常顯示器要高。在一個Mac筆記本上，它的屏幕物理尺寸是很小的，可是分辨率很高（一般爲2560 x 1600）。那咱們正常的頁面在Mac上會怎麼顯示呢？好比咱們寫一個1000px的div，在1920px寬的顯示屏上大概佔據整個瀏覽器的一半，可是在Mac中只能顯示1000/2560大小，也就是說，顯示的尺寸變小了。這就存在一個問題，因爲尺寸變小，裏面的文字等內容所有變小，咱們在1920px下能看清的東西，在Mac下因爲文字變小（注意，不是由於模糊，而是因爲變小）看不清楚。但看不清楚，頁面顯示仍是完整的，不會出現一開始說的登陸按鈕超過頁面不顯示了。問題是，在Mac筆記本的Windows系統下，它默認顯示是200%顯示（Win 10右鍵--顯示設置--規模和佈局查看）。這是操做系統爲高清屏默認設置的，就是讓用於能看清被縮小了的頁面。因爲200%，至關於各尺寸都放大了2倍，因此固然登陸按鈕超過頁面不見了。

我最後的一個勉強的解決方法是經過JS。window對象有個devicePixelRatio屬性，能檢測設備像素比。它不是默認200%嗎，那它的devicePixelRatio的值就是2。我檢測當它大於1時，即此時是在Mac下的windows系統操做時，改變各個margin和圖片的大小值，而在正常顯示時，不改變。

其實這方法也很差，但限於水平有限，只能遇到這個問題就針對這個問題解決，全局通用的不會。

而後還想說說固定寬度的問題。因爲上面說了200%，而Mac一般寬度是2560px寬，因此建議，你的寬度不要超過1200px（1200px * 2 =2400px <2560，不會產生滾動條）。固然，這裏說的是整行全部元素的寬度不超過1200px，你不能左側Left固定寬度500px沒超過1200，右側Right又來個1000px說也沒超過1200。必須是加起來不超過。