什麼大小應我的圖片是在移動網站上

Question

我們正在設計一個模板，一個移動網站，我們抓住了問題，我們不知道一個標誌應該是什麼樣的尺寸，或背景等

我們將使用Jquery移動API和HTML5/CSS3，它基本上允許我們創建網站的整個架構，而不必擔心尺寸，但對於像背景和圖像這樣的外部資產而言，我們不知道什麼是最佳尺寸以便與大多數設備更加兼容。

Answer 1

iPhone 4S/5具有640像素寬的高分辨率屏幕。許多Android智能手機的頂部寬度爲720px，儘管有些高達800px。任何事情都可能被視爲平板電腦。

，你可以儘可能廣泛的兼容性做的最好的事情，那麼，是一個CSS樣式：

img { max-width: 100%; height: auto; } 

這將確保無論屏幕是什麼分辨率，你的圖像將不大於包含它的元素。 （在考慮移動用戶的情況下構建響應站點時，您的元素寬度，邊距和填充應儘可能按百分比計算。）顯然，這也意味着您正在下載比許多手機所需的更多圖像數據，但如果您'處理雙色標誌，這沒什麼區別。一如既往，保持圖像儘可能少和儘可能小。

此外，如果你不處理照片，你應該看看SVG圖像。由於它們是基於矢量的，因此它們可以在任何分辨率下完美調整大小，並且可以使用they're compatible with pretty much every browser except IE8 and Android 2.x。

Answer 2

您必須爲此使用CSS媒體查詢。 看看這篇文章在這裏：http://davidwalsh.name/image-max-width

/* iphone */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
     img { max-width: 100%; } 
} 

/* ipad */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
     img { max-width: 100%; } 
} 

Answer 3

考慮下面的html代碼：

<img src="images/myimage.jpg" alt="image"> 

在這個例子以一看，我們需要根據屏幕大小多張圖片。由於大多數瀏覽器首先查看HTML文檔並在加載Javascript之前預加載圖像，JavaScript不會是一個完美的解決方案。

這就是爲什麼：使用響應式圖像服務器！

我用Sencha.io Src，這將搞清楚，設備屏幕和收縮（這僅縮小圖像）圖像以適應其屏幕大小的限制。 Sencha.io使用瀏覽器的useragent字符串在其數據庫中查找設備。它會將圖像縮小到設備的最大寬度，並將其存儲在高速緩存中，該高速緩存將持續30分鐘。

使用它這樣的：

<img src="http://src.sencha.io./http://[your domain and path]/images/myimage.jpg" alt="image"> 

PS：它也有它shortcomes：它通過第三方依賴於設備的檢測，並需要您路線的所有圖片。但是，由於目前他們還沒有很好的解決方案（即使有媒體查詢，您也必須處理瀏覽器，這些瀏覽器會在不適用的媒體查詢中下載資源） - 我希望這可以幫助您！

Answer 4

我確定圖像大小通常不應該更像它定義CSS媒體查詢標準。

這是一個簡短的2015-2016最受歡迎設備CSS媒體查詢列表。

如果需要，只需將新設備的媒體文件添加到此列表中即可。

/* Smartphones (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
/* Styles */ 
} 

/* Smartphones (landscape) ----------- */ 
@media only screen and (min-width : 321px) { 
/* Styles */ 
} 

/* Smartphones (portrait) ----------- */ 
@media only screen and (max-width : 320px) { 
/* Styles */ 
} 

/* iPads (portrait and landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
/* Styles */ 
} 

/* iPads (landscape) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { 
/* Styles */ 
} 

/* iPads (portrait) ----------- */ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { 
/* Styles */ 
} 
/********** 
iPad 3 
**********/ 
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 
/* Desktops and laptops ----------- */ 
@media only screen and (min-width : 1224px) { 
/* Styles */ 
} 

/* Large screens ----------- */ 
@media only screen and (min-width : 1824px) { 
/* Styles */ 
} 

/* iPhone 4 ----------- */ 
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) { 
/* Styles */ 
} 

/* iPhone 5 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* iPhone 6 ----------- */ 
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* iPhone 6+ ----------- */ 
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* Samsung Galaxy S3 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){ 
/* Styles */ 
} 

/* Samsung Galaxy S4 ----------- */ 
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

/* Samsung Galaxy S5 ----------- */ 
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){ 
/* Styles */ 
} 

而且也看看舊名單https://css-tricks.com/snippets/css/media-queries-for-standard-devices/和https://gist.github.com/hs0ucy/3762901