CSS像素倍增在iPhone上

我正在開發一個響應式主題，問題是所有的像素在iPhone上翻倍。我相信這是由於視網膜顯示。CSS像素倍增在iPhone上

我的問題是我必須創建一個另外的樣式表（或使用媒體查詢）給視網膜只顯示（按像素密度的實際像素大小的特殊值）？

邊緣的所有加倍
邊框厚度加倍
字體大小加倍

目前，我有所有的邊距，邊框..等等以像素爲單位

現在，我正在使用下面的java腳本來控制初始規模，它工作正常。

(function() { 
    var meta = document.createElement("meta"); 
    meta.setAttribute('name','viewport'); 
    var content = 'initial-scale='; 
    content += 1/window.devicePixelRatio; 
    content += ',user-scalable=no'; 
    meta.setAttribute('content', content); 
    document.getElementsByTagName('head')[0].appendChild(meta); 
})();

有人可以告訴我一個解決方案嗎？

編輯：

我使用<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />了。

來源

2013-08-21 Michelle Lewis

<meta name="viewport" content="width=device-width,initial-scale=1.0">是你在找什麼，把它與媒體查詢結合起來。

來源

2013-08-21 12:11:55 koningdavid

我已經試過了 '沒有運氣。但JavaScript代碼正在工作，因爲它正在檢測像素密度並設置初始比例。 –

這將起作用，例如將其與@media（max-width：320px）{/ * styles * /}結合使用。這將在iPhone上運行，即使分辨率大於320px，也是因爲meta標籤告訴瀏覽器採用設備寬度而不是實際的分辨率。 – koningdavid

對不起！但是，「結合」是什麼意思？目前，我在'@media唯一屏幕和（min-width：640px）和（max-width：1011px）{}內有我的640設計。所以......我怎麼把你的代碼放在裏面？我的問題是隻有一倍的像素。檢測設備寬度和更改佈局是可以的。當我調整桌面瀏覽器的大小時，它工作正常。 –

CSS像素倍增在iPhone上

回答

相關問題