new Iphone X and Xara

**behzad** · 30 September 2018, 11:26 PM

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** · 01 October 2018, 01:27 AM

I'm going to move this to Dear Xara.

**behzad** · 01 October 2018, 02:56 PM

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

**pauland** · 02 October 2018, 08:46 AM

Originally Posted by behzad

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** · 02 October 2018, 11:10 AM

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** · 02 October 2018, 11:22 AM

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.

**behzad** · 04 December 2018, 01:44 AM

Feels like I'm talking to myself client is upset because on the new iPad the screen is shifting and it doesn't fit in the screen this is embarrassing.

**pauland** · 04 December 2018, 07:49 AM

Originally Posted by behzad

Feels like I'm talking to myself client is upset because on the new iPad the screen is shifting and it doesn't fit in the screen this is embarrassing.

Can't you make a variant of a size that suits the iPhone X and iPad?

**behzad** · 04 December 2018, 12:18 PM

I can then I will have many variants, before all this my 2 variants worked perfectly. Somehow xara is not sending the message to the new devices to centre/fit the screen. On Andriod it is fine now with just two variants. This line of code in Xara is not working with iphone and tablets. Just got the new apple tablet and the screen moves all over the place until it finally something triggers and then it fits in place.

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

**pauland** · 04 December 2018, 01:09 PM

Originally Posted by behzad

I can then I will have many variants, before all this my 2 variants worked perfectly. Somehow xara is not sending the message to the new devices to centre/fit the screen. On Andriod it is fine now with just two variants. This line of code in Xara is not working with iphone and tablets. Just got the new apple tablet and the screen moves all over the place until it finally something triggers and then it fits in place.

<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

Your customer doesn't care what the problem is or who's fault it is - they need it fixed now. If Xara aren't moving you need to before your client switches web designer.