Streaming live at 10am (PST)

How to force iPhone X to use mobile landscape

Hi there. When using a smartphone in landscape mode, is there a way to force devices with extra long screen, such as iPhone X/XS/XR series, to display in Mobile-Landscape breakpoint rather than Tablet (Portrait) breakpoint?

Having the vertical oriented tablet design to be shown on the horizontal mobile screen is not ideal. Many of my design elements intended for the bigger tablet screen just look awful on iPhone X’s landscape mode. Advices appreciated.

Hi @qkypgy - Welcome to the forums.

Unfortunately there is not currently a way to add additional hard breakpoints to the designer. You can use custom CSS however. You can size the design viewport (width) by grabbing the control tab (right vertical center) and expanding out to 768px (max width on that viewport) to see your design scale. If you are using fluid elements it should be fine. On most sites, phones are going to be a higher percentage of visits than tablets, which is always growing. You can just take that into consideration when you create your design.

Here are some iPhone X breakpoints:

Portrait and Landscape

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3) { /* Add your styles */}

iPhone X in landscape

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) { /* Add your styles */}

iPhone X portrait

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 812px) 
and (-webkit-device-pixel-ratio : 3)
and (orientation : portrait) { /* Add your styles */ }

I personally find it easier to publish my design and inspect it / write my additional css using the browser devtools. Then incorporating that back into the site via Custom Code.

There are lots of informative topics in these forums. Try searching for “iPhone X”.

Curious about other breakpoints for other Apple devices? Check out this external resource -> http://stephen.io/mediaqueries/

Hi there, I understand that I can “target” different iOS devices/orientations and add styles. But how am I able to force an iPhone (for exemple Xr in landscape in my case) to use the phone/landscape view instead of tablet?

<style>
/* 1792x828px at 326ppi */
@media only screen 
and (device-width : 414px) 
and (device-height : 896px) 
and (-webkit-device-pixel-ratio : 2) { }
and (orientation : landscape) { /* Add your styles */}
</style>
2 Likes

@yerode did you every figure this out? Would love to know how to do this.