5 ms·

Well, adding support for Retina displays is definitely an iOS-specific thing (at least right now). But orientation changes? Is that not a general "mobile issue

Well, adding support for Retina displays is definitely an iOS-specific thing (at least right now). But orientation changes? Is that not a general "mobile issue" for you? Or is (are) the WebKit build(s) in iOS doing something specifically bad compared to (say) Android?

Chris_Newton 14y ago
If you rotate an iPad from portrait to landscape, for example, then the default behaviour in Safari is to show the same page layout as you had before, but scale it up to the new width. That's far from ideal if your site uses a responsive design that could adapt quite happily to use the extra width in a landscape orientation.
- barumrho 14y ago
  Can't you disable zooming to solve that problem?
  - bigiain 14y ago
    I suggest you ask your 40+ year old users (or any users with less than 20/20 vision) about what they think of you disabling zooming on them…
  - Chris_Newton 14y ago
    Yes, but that workaround has accessibility problems of its own.
- bigiain 14y ago
  Can I just mention that at least on my phone, websites that "adapt" to landscape mode often bug the hell out of me. With my getting-old-eyesight, I often rotate to landscape mode to get bigger text so I can read it more easily. When a website goes "Oh look, more horizontal pixels, I'll shrink the middle column and add some nav on the left and ads on the right!"; I'll usually just hit [back] and move on to some other site. (Possibly interesting idea: add some analytics so that you can detect portrait/landscape orientation changes, and report on bounce rates immediately afterwards…)
  - Chris_Newton 14y ago
    In our defence, we do our best to keep the standard zoom gesture working and we use a reasonable default font size. We're not 21 any more either. ;-) However, for most of our users, a zoomed single-column layout is going to be less useful than switching to two columns when in landscape mode on an iPad. On an iPhone, you should see a single-column layout in either orientation using the design we're currently testing.
josteink 14y ago
Well, adding support for Retina displays is definitely an iOS-specific thing (at least right now). Not "right now". As long as you intend to support "retina displays", it will always be an Apple-specific thing. If you want to support something as general as high-DPI devices, you know, something concrete and not an Apple marketing-term, there are certainly lots of those being made and sold as we speak. They run Android and are not made by Apple. You might want to consider supporting those as well.
- karlshea 14y ago
  Well as long as they are running WebKit and support the device pixel ratio media query, they will be supported. But I'm guessing that Android phones with high-dpi screens that support that query are still at the single digit percentage of browser statistics.
  - WiseWeasel 14y ago
    That's fine for CSS images (media queries), but what about content images?
    - karlshea 14y ago
      All the code I've seen for content images involves some JavaScript stuff that uses the device pixel ratio as well.
      - WiseWeasel 14y ago
        The server should not have to decide which image to send, based on whatever it can gather of a combination of various factors, including device display resolution capability (double-density vs regular pixel mapping) and connection quality (wireless vs broadband) or whatever else comes into play. The server should be advertising the capability of high res images and the user agent should be requesting them if it wants.
        14y ago
lazerwalker 14y ago
In my experience, the problem is that the Android/WP7/[other smartphone OS here] web browsers are so far behind iOS WebKit in terms of functionality that you basically have to handle each device on a case-by-case basis. Given that, a lot of developers choose to focus solely on iOS since it's the lowest-hanging fruit with a massively large userbase and a relatively-standards-compliant codebase. For example, all mobile web browsers should theoretically throw either a resize or orientationchange event on orientation change, but some Android devices don't, with no other viable fallback, and no clear rhyme or reason as to which devices support it and which don't (other than that newer flagship devices are slightly more likely to be standards-compliant). CSS media queries are more consistently supported, but they aren't the solution to every problem.

Chris_Newton 14y ago

If you rotate an iPad from portrait to landscape, for example, then the default behaviour in Safari is to show the same page layout as you had before, but scale it up to the new width. That's far from ideal if your site uses a responsive design that could adapt quite happily to use the extra width in a landscape orientation.

barumrho 14y ago
Can't you disable zooming to solve that problem?
- bigiain 14y ago
  I suggest you ask your 40+ year old users (or any users with less than 20/20 vision) about what they think of you disabling zooming on them…
- Chris_Newton 14y ago
  Yes, but that workaround has accessibility problems of its own.
bigiain 14y ago
Can I just mention that at least on my phone, websites that "adapt" to landscape mode often bug the hell out of me. With my getting-old-eyesight, I often rotate to landscape mode to get bigger text so I can read it more easily. When a website goes "Oh look, more horizontal pixels, I'll shrink the middle column and add some nav on the left and ads on the right!"; I'll usually just hit [back] and move on to some other site. (Possibly interesting idea: add some analytics so that you can detect portrait/landscape orientation changes, and report on bounce rates immediately afterwards…)
- Chris_Newton 14y ago
  In our defence, we do our best to keep the standard zoom gesture working and we use a reasonable default font size. We're not 21 any more either. ;-) However, for most of our users, a zoomed single-column layout is going to be less useful than switching to two columns when in landscape mode on an iPad. On an iPhone, you should see a single-column layout in either orientation using the design we're currently testing.

josteink 14y ago

Well, adding support for Retina displays is definitely an iOS-specific thing (at least right now). Not "right now". As long as you intend to support "retina displays", it will always be an Apple-specific thing. If you want to support something as general as high-DPI devices, you know, something concrete and not an Apple marketing-term, there are certainly lots of those being made and sold as we speak. They run Android and are not made by Apple. You might want to consider supporting those as well.

karlshea 14y ago
Well as long as they are running WebKit and support the device pixel ratio media query, they will be supported. But I'm guessing that Android phones with high-dpi screens that support that query are still at the single digit percentage of browser statistics.
- WiseWeasel 14y ago
  That's fine for CSS images (media queries), but what about content images?
  - karlshea 14y ago
    All the code I've seen for content images involves some JavaScript stuff that uses the device pixel ratio as well.
    - WiseWeasel 14y ago
      The server should not have to decide which image to send, based on whatever it can gather of a combination of various factors, including device display resolution capability (double-density vs regular pixel mapping) and connection quality (wireless vs broadband) or whatever else comes into play. The server should be advertising the capability of high res images and the user agent should be requesting them if it wants.
      - 14y ago

lazerwalker 14y ago

In my experience, the problem is that the Android/WP7/[other smartphone OS here] web browsers are so far behind iOS WebKit in terms of functionality that you basically have to handle each device on a case-by-case basis. Given that, a lot of developers choose to focus solely on iOS since it's the lowest-hanging fruit with a massively large userbase and a relatively-standards-compliant codebase. For example, all mobile web browsers should theoretically throw either a resize or orientationchange event on orientation change, but some Android devices don't, with no other viable fallback, and no clear rhyme or reason as to which devices support it and which don't (other than that newer flagship devices are slightly more likely to be standards-compliant). CSS media queries are more consistently supported, but they aren't the solution to every problem.