移動瀏覽器中的網頁高度被拉伸

Question

我已經創建了一個網站，該網站在除移動瀏覽器之外的所有平台上均能正常運行，該頁面的頁面高度被拉長，並且首次單擊頁面后沒有響應。

html,body {
  height:100%;
  background:center no-repeat fixed url('../asset/images/logo1.jpg');
  background-size: cover;
  color:#444;
  font-family: 'Lato', sans-serif;
}

我的中繼標記：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0">

編輯： 有問題的網站

Answer 1

第一個問題是不推薦使用框架集，也就不足為奇了，它導致了iPhone Safari中的問題。 請參閱-https://developer.mozilla.org/en/docs/Web/HTML/Element/frameset 。

第二-為什么您需要100％的正文和html高度？ 即使您希望高度最小為100％，也請對身體執行min-height：100vh。

第三-即使沒有正確使用框架集。 你是包括網站的內容- http://satyam.esy.es/HealthFriends/到網站- http://healthfriends.in/ 。 因此，為什么不復制粘貼內容和資產，因為框架集中沒有多余的框架。

最后-如果您無法從satyam.esy.es域中提取資產，則可能存在問題，您將必須自己開發資產。 在這種情況下，也請向CDN請求引導程序，datepicker和moment.js。 並編寫自己的CSS和JS。

關於您的iPhone，當然是框架集引起的問題。 但是也可能有其他東西。 您需要使用Mordenizr來檢查哪些功能適用於safari iOS，然后使用正確的polyfill。

希望這可以幫助您調試和開發。 謝謝