We really need to discuss this

[behzad]

This is something that with the introduction of larger screens such as iphone X is becoming a problem for using xara and making mobile websites. I have recently faced this.
I will provide a chart below with pixel dimensions for most popular devices. The problems comes when using a mobile device like the iphone x switches between the main desktop
version and mobile version when held horizontally or vertically (considering there is only two variant), so really this becomes a problem as far as consistency between the two
layouts.

The mobile setting effects the desktop, so I have not yet found the right dimensions to avoid this problem.

Let me know if you find a solution for the iphone x, which is 375W x 812H, what setup is needed for both desktop and mobile to not have it flip from one to another like I have mentioned above.


https://mydevice.io/devices/#sortSmartphones

[bkjohns]

Perhaps this is a good time to make a third variant - give Xara something else to switch to when the iphone is rotated to landscape.

[behzad]

bkjohns that is a possibility but imagine doing a 50 page website and having to adjust for 3 or more variants, that is crazy amount of work.

[Merlin_AZ]

I'm currently doing 980 and 480px widths.
So we would have to go wider than 2436 to fill the screen if it's viewed in landscape?

[behzad]

I'm currently doing 980 and 480px widths.
So we would have to go wider than 2436 to fill the screen if it's viewed in landscape?

So for your case, the Apple iPhone 6+, 6s+, 7+, 8+ and x
will switch to desktop version of your 980 when they are hold horizontally. When you tilt them vertically they will switch to your 480 layout. This is exactly what I am talking about.

[behzad]

Here is the solution I found for using two variants, it covers all mobiles including the tablets.

Main website 1260 px wide (for browser widths 870 and above)
Mobile website 480px wide (for browser widths up to 870 and below)

[Egg Bramhill]

Yes Behzad, but aren't you just 'bending' variants to suit a particular situation? It wasn't that many years ago we were designing sites for 800 x 600 px desktop resolution, which were the most common resolutions at the time. With mobile (and other devices) now shipping with 812px resolutions I can see this becoming more of an issue as you state. What happens when the next iphone or android ships with 1624px resolutions?

Personally I always view sites on a mobile in vertical orientation, the real estate seems to fit far better.

[behzad]

Egg, your words are so comforting