When designing responsive websites it pays to know the various resolutions so you can create proper breakpoints in your design.
Apple
Apple Ipad 2 – 1024 x 768 at at 132 ppi with a 9.7 inch display
Apple Ipad with Retina display – 2048-x 1536 at 264 ppi with 9.7 inch display
Apple Mini – 1024 x 768 at 153 ppi with a 7.9 inch display
Apple IPod – 1136 x 640 at 326 ppi
Apple IPod -4th generation – 960 x 640 at 320ppi
Apple Ipod Touch – 1136 x 640 at 326 ppi
Apple IPhone 4 and 4S – 960 x 640 at 326 ppi with a 3.5″ display
Apple IPhone 5 – 1136 x 640 at 326 ppi with a 4″ display
Amazon Kindle
Kindle Fire (1st gen) 1024 x 600 with 7″ display
Kindle Fire (2nd gen) 1024 x 600 with 7″ display
Kindle Fire HD 7″ – 1280 x 800 with 7″ display
Kindle Fire 8.9 – 1920 x 1200 with 8.9″ display
Android Phones
Samsung Galaxy II – 800 x 480 at 218 ppi
Samsung Galaxy III – 1280 x 720 at 306 ppi
Blackberry 10 – 1280 x 768
Blackberry Z10 – 1280 x 768
Android Tablets
Samsung Galaxy Tab 10 – 1280 x 800 – 10″ display
Samsung Galaxy Tab 7 and 7 Plus – 1024 x 600 – 7″ display
Acer Iconia Tab A500 – 1280 x 800 – 10″ display
It seems to me without getting into a whole bunch more models, and older phones the breakpoints at minimum should be 1280, 1024, 800, 600, 480 and 320. Of course it really all depends on the final design. And to even further the matter more their is a whole genre being created about fluid grids.
Articles to Use as a Reference for further exploration:
.Net Magazine – determining breakpoints for a responsive design
1st WebDesigner – overview of breakpoints in responsive design
Device-Agnostic Approach to Responsive design
Webdesignerwall – Setting Breakpoints in Responsive Design
Wikipedia’s list of display’s by pixel density
And of course Ethan Marcotte, who we can thank for starting the whole responsive web idea.
2455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
