瀏覽器和手機中的不同輸出 - 相同的css

Question

好的，第一次海報，網站的長時間用戶（當谷歌搜索線索時）。

我剛剛開始編寫代碼，並且創建了這個網站（所有這些都在純HTML和CSS上 - 在Bootstrap中做了一個，但不喜歡它的可用性 - 稍後會測試Foundation和Sass + Susy）。

http://limakeppler.com.br/teste/areas.html

但是我有兩個愚蠢的（我相信）問題之。

第一：不能讓一個CSS引用在移動和瀏覽器窗口上工作（對於同一個外部CSS，在HTML上有兩個條目）。準備好適當的媒體查詢使用情況，但無法完成。只有一個媒體查詢適合這兩種工作的一些指針會很好。

第二：即使使用相同的css（這種方式需要一些工作），在手機尺寸中，我得到了不同的結果，在Chrome Iphone模擬器中打開網站，或者只是重新調整瀏覽器窗口的大小？我怎樣才能解決這個問題？

在此先感謝，並對我的英語感到抱歉。如果需要的話，問一下，我會發布相關的代碼（但是對於我在這裏看到的，託管頁面將起作用）。

Answer 1

這是一個普遍的問題。不同的瀏覽器渲染不同的東西，但通常在合理的範圍內。在現代瀏覽器中渲染的主要差異在於缺少正確的前綴代碼。如果是這種情況，你可以嘗試像https://autoprefixer.github.io/。

如果您指的是您的<H1>元素與移動設備寬度重疊，則爲padding：1em;這是一起粉碎文本。相反，您可以嘗試使用%來替換em。

Answer 2

發現問題。正如我發現的那樣，iPhone瀏覽器發生了一些奇怪的調整大小。所以，我只是添加

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

，一切都按預期工作。該死的，也許這就是爲什麼一個框架不是一個壞主意：P

感謝您的幫助。