視網膜移動網絡應用

免責聲明：我知道這些類型的問題已被要求去世，但沒有人能找到幫助我的具體情況。視網膜移動網絡應用

我正在做一個移動web應用程序，我無法使用響應式樣式（=以百分數或ems等定義大小）;一切都需要像素完美。到目前爲止，我工作的佈局是640像素寬（視網膜）。目標平臺是小型iOS設備（iPhone，iPod touch），Android手機和Windows Phone。任何其他平臺都是肉汁，但不是「官方」支持的。

當我通過開發人員工具僞裝用戶代理時，它在桌面版Chrome上看起來很棒。但是，當我在實際的移動設備上進行測試時，縮放在不同的平臺上以不同的方式工作。 Android似乎會導致水平滾動，而對Windows Phone的評價越少越好。我目前沒有iPhone來測試它。

我想要的是640像素寬的佈局被縮放以適應設備的寬度。用戶不應該能夠側面滾動，他不應該能夠捏縮放。對於所有的意圖和目的，它應該看起來像一個本地應用程序。

我已經嘗試了不同的突變，根據在SO和其他網站上找到的答案，但我使用的視口元標籤目前看起來像這樣;

<meta content='width=640, target-densityDpi=device-dpi, initial-scale=0.5, maximum-scale=0.5, user-scalable=0' name='viewport' /> 
<meta name="viewport" content="width=640, user-scalable=no" /> 
<meta name="apple-mobile-web-app-capable" content="yes" />

從我所瞭解的情況來看，Android在規模數字方面存在一些問題。

我怎麼能達到我想要的？我已經在做用戶代理嗅探（骯髒，我知道），所以我對移動操作系統特定的元標記很好。

大部分的應用程序還沒有完成，所以我也可以做移動操作系統特定的CSS，我對它開放;但是，爲每個操作系統/分辨率維護單獨的樣式表似乎是非常不切實際的。

來源

2013-05-06 Emphram Stavanger

這是不工作的原因是因爲initial-scale=0.5並不意味着640的文檔寬度將傾斜到320;相反，這表示用戶在加載頁面時看到的初始縮放級別。

我會建議將您的DOM寬度更改爲320px，並將您的initial-scale屬性設置爲1。如果你想讓整個佈局變成「視網膜」，那麼你需要分別處理每個元素。例如。如果有一個安全工程師圖像現在是在尋找視網膜模糊，你可以通過CSS處理這個問題：

@media only screen and (-webkit-min-device-pixel-ratio: 1.5), 
    only screen and (min--moz-device-pixel-ratio: 1.5), 
    only screen and (-o-min-device-pixel-ratio: 3/1), 
    only screen and (min-device-pixel-ratio: 1.5), 
    only screen and (min-resolution: 1.5dppx) { 

    img { background-image: url('[email protected]'); background-size: cover; } 
}

在這個例子中[email protected]的大小600x400。

希望這有助於 - 如果您想要更多有針對性的建議，請發佈鏈接或特定的代碼示例。

來源

2013-07-22 18:06:47 MikeZ

視網膜移動網絡應用

回答

相關問題