由於縮放問題，響應網站沒有正確顯示水平線條

我正在使用CSS添加響應功能到網站，這個網站已經有一段時間了，現在響應功能被添加到它，以便它可以支持移動版本。由於縮放問題，響應網站沒有正確顯示水平線條

我面臨的一個問題是假設有多行由水平線分隔。在一些地方我使用hr，並在某些地方我用簡單div到...

這裏是一個樣本連接擺弄http://fiddle.jshell.net/G2rCT/3/

當我查看桌面版本，那麼究竟行顯示爲1個像素身高和當我在手機上查看時，替代線顯示，如果他們是2像素的高度。

但是，當我放大它看起來很好，我的問題是與縮放因素。我也使用<meta name="viewport" content="width=device-width" />改變了初始值，但它沒有任何區別。

我錯過了什麼東西問題是我使用視口的方式。

移動樣本可他檢查了這裏http://fiddle.jshell.net/G2rCT/4/show/

來源

2014-05-15 Learning

測試你的代碼在本地和使用JS小提琴鏈接，您提供的，有和沒有meta標籤，並且不能重新在Android 4.4（包括股票和Chrome瀏覽器）的問題。你在看什麼設備？ –

我使用的是Android 2.3.7，這裏是你可以嘗試http://fiddle.jshell.net/G2rCT/4/show/的鏈接，我也嘗試過最新的移動Opera瀏覽器相同的問題。 – Learning

這是不是真的就可以解決的問題。你的代碼很好。

下面你會看到我拍攝的一些截圖的圖像。我通過Android 2.3.3和4.4在虛擬機上運行Fiddle，然後使用縮放進行播放。前兩張圖片是2.3.3和4.4，分辨率爲100％。我的屏幕上的1個像素是'手機'上的1個像素。你可以看到這些線條沒有問題（我認爲4.4截圖可能並不完全是1：1，但它在2.3.3截圖中很清楚）

但是在下面，你會看到我在哪裏拍攝了相同的設備但縮小了電話，因此不再是1：1。您可以看到您在這些屏幕截圖中出現的問題，這意味着您的手機屏幕和縮放比例是這裏的問題。

編輯：您可能需要加載image URL in a new window才能看到真實的東西。我不知道如何鏈接這裏的圖片抱歉！

Scaling issues on android

來源

2014-05-15 12:22:38

由於縮放問題，響應網站沒有正確顯示水平線條

回答

相關問題