{var%20f='http://v.t.sina.com.cn/share/share.php?appkey=1515056452',u=z||d.location,p=['&url=',e(u),'&title=',e(t||d.title),'&source=',e(r),'&sourceUrl=',e(l),'&content=',c||'gb2312','&pic=',e(p||'')].join('');function%20a(){if(!window.open([f,p].join(''),'mb',['toolbar=0,status=0,resizable=1,width=440,height=430,left=',(s.width-440)/2,',top=',(s.height-430)/2].join('')))u.href=[f,p].join('');};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();})(screen,document,encodeURIComponent,'','','https://www.manongdao.com/data/attach/logo/logo.png', '推荐 贪生不怕死 的问题《iPhone 5 screen size VS CSS media query [duplicate》','https://www.manongdao.com/q-492367.html','页面编码gb2312|utf-8默认gb2312'));){kind=link}
Possible Duplicate:
iPhone 5 CSS media query
The iPhone 5 tech spec states screen dimension of 1136 by 640
My question is this,
For landscape, ff I am to use the max-device-width of 568px refer to http://www.stephentgilbert.com/mediaqueries/#iPhone
can you explain why that works when the dimension stated on the iPhone 5 site says the width would be 1136px
I know I'm mixing up with some of the fundamentals here. I'd appreciate if you could provide me with a proper explanation and perhaps link me to relevant online resources.
The Retina display contains twice as many pixels as the standard display, but iOS treats the resolution as the standard display for measurement and screen output. If it didn't, websites would all look very tiny and zoomed out.
The iPhone's Retina display means the 1136x640 screen uses 568x320 virtual pixels. Each CSS pixel is made up of four physical pixels (2x2).
Since no one who says "give me a 100px wide div here" in CSS wants it to show up at half-size on a higher-resolution device like a Retina display, it doesn't use the physical pixels as CSS pixels.