不可縮放的webview，適用於iPhone和iPhone4的分辨率

我想要一個具有單個HTML和單個CSS文件的webview，以相同大小顯示圖形，但顯示每個圖形的原始分辨率。不可縮放的webview，適用於iPhone和iPhone4的分辨率

我現有的爲320x480設計的網頁瀏覽器似乎可以很好地擴展（例如清晰的文本和邊框半徑），儘管圖像在iPhone4模擬器中只有一半。如何使用HTML，CSS或JS自動選擇圖形或其雙精度版本時如何模擬本機圖像加載行爲？（希望不是JS）

我目前使用的視口聲明，如下所示：

<meta content='initial-scale=0.5; maximum-scale=1.0; minimum-scale=0.5; user-scalable=0;' name='viewport' />

這縮小和圖像像素是1：1的顯示像素，但它也按比例縮小一切其他。當然，它在小型iPhone顯示屏上很小。

我有一種感覺，這與某種視口大小媒體查詢有關嗎？

來源

2010-06-22 Alex Wayne

現有技術：http://stackoverflow.com/questions/1790346/uiwebview-scaling-image-independently-from-text - 帶背景圖像會帶來更多的頭痛，但請嘗試'webkit-背景大小「，猜猜它會工作。 – 2010-06-28 02:38:41

你在設備上的行爲是否一樣？ Sim有幾個已知的錯誤。 – Olie 2010-07-07 16:00:09

我無意中發現了這個前些天：http://aralbalkan.com/3331

這會在你的低分辨率加載iPhone 4的樣式表

<link 
    rel="stylesheet" 
    type="text/css" 
    href="/css/retina.css" 
    media="only screen and (-webkit-min-device-pixel-ratio: 2)" 
/>

然後樣式表中的魔術此舉是爲了你的背景大小屬性設置爲大小的低分辨率圖像。

.demoImage 
{ 
    background-image: url(../images/my-image-64.png); 
    background-size: 64px 64px; 
    background-repeat: no-repeat; 
}

現在retina.css簡單地示出了雙清晰度的版本

.demoImage 
{ 
    background-image: url(../images/my-image-128.png); 
}

現在的CSS背景圖像將顯示128×128圖像，就好像它是64個提供一個1的CSS像素：1的圖像像素到顯示像素圖像顯示在iPhone 4上。

來源

2010-07-23 16:41:25

我遇到同樣的問題。我沒有時間去處理它，但我的想法是創建每英寸像素更高的圖形並將它們用於iphone 3g（s）和iphone 4.

不確定這是否會起作用壽。但值得一試。

來源

2010-07-01 10:35:39

這帶來的麻煩就是帶寬。你正在浪費帶寬發送比你非iPhone4的圖像更大的圖像。雖然它應該很好地縮小它們。 – 2010-07-23 16:43:39

這將加載特定樣式的iPhone 4：

<link 
    rel="stylesheet" type="text/css" href="/css/style.css" media="only screen and (-webkit-min-device-pixel-ratio: 2)" 
/>

來源

2010-07-08 01:35:48

一個CSS media query應該工作：

@media only screen and (min-resolution: 300dpi) { ... }

而且，列表除了提供技術考慮serving high-res images。這篇文章主要是關於印刷風格，但在這裏也適用。

來源

2010-07-23 15:52:26

不可縮放的webview，適用於iPhone和iPhone4的分辨率

回答

相關問題