2016-03-01 71 views
1

移動屏幕的高度不是100%。儘管它在更大的設備上看起來不錯。我如何修復移動設備中身體的高度?

這是頁面的外觀DESKTOP IMG

我想包括<meta name="viewport" content="width=device-width, height=device-height" />但它不僅使內容更大,它不會解決問題。

這是它使用後的樣子。 PHONE IMG

頁腳下移越多,我添加內容中的東西。我也試圖給身體100%身高,但不會修復它。是否有可能使頁面適合設備的大小,以便在每個設備中看起來相同。

+1

你可以用相關的代碼創建一個代碼片段嗎? – silviagreen

+0

這是[CODE](http://pastebin.com/ZgeWF8eP)結構。 –

+0

@YllzaCanaj嘗試設置'身體{最小高度:100vh}' – fcalderan

回答

0
  1. 設置身體的高度不是一個好主意。如果這是你想要的,你最好使用粘性頁腳。 (例如:http://ryanfait.com/sticky-footer/

  2. 嘗試使用類似Bootstrap的框架來響應您的網頁。 (例如:https://getbootstrap.com/

  3. 如果你真的堅持在身上設置高度,請添加你的html,以確保我們可以告訴你你做錯了什麼。

+0

我試着給這個樣式的頁腳:position:absolute;底部0;那是你的意思嗎?但這不是我所要求的。該頁面100%響應。我想要做的是讓身體適合所有的設備,這樣每個人看起來都一樣。 –

+0

您根本無法將主體設置爲適合每個設備的屏幕並同時在所有設備上維護佈局。手機,平板電腦和臺式機不應該有特定的設計,以確保它在每個設備上看起來不錯,而不是使它看起來一樣嗎?我不認爲這個網站是可讀的,當你只是使桌面版本更小,以適應手機屏幕... –