new Iphone X and Xara

[behzad]

I tested the few websites I build with Xara on the new Iphone X and vertically it looks fine but when I flipped the phone on its side, the webside did not fit within the window, meaning that I had to use pinch motion to get the whole website to fit on the screen. Other websites not using xara were fine and fit every-time. What is happening or can I do to fix this issue.

[gwpriester]

I'm going to move this to Dear Xara.

[behzad]

Thank you Gary, for Dear Xara here are the resolutions for mobile and desktop.
Main = 1130 px
Mobile = 600 px

[pauland]

Thank you Gary, for Dear Xara here are the resolutions for mobile and desktop.
Main = 1130 px
Mobile = 600 px

The viewport size is 375 x 812 for the iPhone X. Your mobile page width is too wide for the iPhone X in portrait orientation.

Browser viewport sizes aren't the same as pixel resolution ( which is 1125 x 2436 ).

If you want to have the website fit in portrait your width setting needs to be 375 or less.

Non-Xara websites are either using more appropriate width breakpoints and/or using percentages for their sizing (it's not possible to use percentages in Xara, except for iFrames/placeholders).

To properly support mobile, you either go for the lowest size or multiple breakpoints. Smaller iPhones have a width of 320.

Sadly a lot of people on TG "finish" their websites but don't check them on multiple browser widths where they look awful.

[behzad]

Thank you for that info. I did check with different browsers but I do not have the privilage of pitching out $1300 for an iphone x and this was not the case before its release. Also I use the following site and tried to consider both tablet and phone resolution and come up with a mobile resolution that would suite most, which it did until the iphone x.

https://www.mydevice.io/

I am not sure If I was not clear about my question, The iphone x looks great with my clients site but when I turn the iphone side ways (looking at it at its physical size of 2436x1125 and CSS size of 812x375 this is where the website does not fit the screen.

Iphones in the past and other mobiles including the samsung all fit the width of the window regardless of the size of the layout, this is built into the hardware I believe but the new Iphone did not.


P.S. I would be caught dead to have 3 or more different variations of websites designed, If that is the only solution then I would have to use another software.

[behzad]

Also when I checked my traffic stats from an apple store that I used the iphone x with, the resolution is 414 x 896 for the iphone x.

[pauland]

Also when I checked my traffic stats from an apple store that I used the iphone x with, the resolution is 414 x 896 for the iphone x.

That resolution is for the iPhone XR.

https://www.paintcodeapp.com/news/ul...ne-resolutions

[ apologies for mis-reading your original post - you were concerned about landscape not portrait - doh!

The 812 landscape width exceeds the 600 mobile breakpoint so you are trying to show a page that is 1130 pixels wide on a device that has an 812 pixel wide viewport - it doesn't fit.

@Gary - why is this in Dear Xara? ]

[behzad]

Yes with the introduction of this phone this is what happens. Before this phone the iphone X, Xs and iphone 6-8+ would show the mobile when viewing horizontally. What is your suggestion now that this is the case with the new Iphones? I do not want to make another variation of the mobile.

If I increase the size of the mobile to 670px in xara then it supports up to 900px. But what if in future iphone comes up with bigger size screens, this will be an ongoing problem? No wonder people use responsive web design.

[Rob-Xar]

Hi Behzad,

This sounds familiar, I'll check if we've logged anything or not but I'm sure it should resize so that you don't have to pinch to re-zoom. If not I'll get it logged!

Thanks
Rob

[pauland]

No wonder people use responsive web design.

Even with responsive design, people use variants for different form factors.