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.
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”.
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>