1 Reply Latest reply: Jun 24, 2013 11:18 PM by Seth Walker RSS

    Best Breakpoint for iPhone Retina Display?

    urbanazel Community Member

      Hello, I am designing a placeholder site for my new personal site. I've given myself a crash course in Edge Reflow, Animate and CSS, and I've had a blast. I am having a bit of trouble getting the correct version of the site to display on my iPhone, however.

       

      I had my breakpoints set at 400px for mobile, and 1024px for tablets. Somewhere in the help files, I believe I read something to the effect of that when setting breakpoints, one could do so with the assumption that mobile devices would display the mobile 400px version. However, for retina-display-equipped devices, this does not appear to be the case. On both an iPhone 4 and an iPhone 5, each having the latest OS installed, the version displayed is not 400px, but 1024px. Even after setting the breakpoint tp 640 and 641, the phones would display the 1024px (as best as I can tell anyway.)

       

      Anyway, I was hoping there would be a simple tag for dictating which version of the site to use, and there is: handheld. However, it seems most phones ignore this tag:

       

       

             At http://www.html5rocks.com/en/mobile/mobifying/

      We need to stop for a minute and discuss media="handheld". Fact is, Android and iOS ignore media="handheld". The claim is that users will miss the high end content provided by stylesheets targeting media="screen" and developers are less likely to maintain a lower quality media="handheld" version. So, as part of their "full web" motto, most modern smart phone browsers simply ignore handheld style sheets.

       

       

      I did find a method of controlling which version iOS devices use on Apple's site, but it uses meta tags. I thought I could only control this behavior through CSS, and I am convinced I am going to have to create a special CSS file just for high-res mobile devices. The Apple article suggests, however, that this may be the kind of functionality I can control wholly with meta tags. Keeping the solution within the same HTML (and/or CSS file) is highly desirable. Is what I want possible? Thanks in advance for any help!