Something I’ve been struggling with for sometime is the fact that many modern mobile devices now have so much resolution that they use the largest breakpoint layout. In other words anything I design for desktop PCs is now also used by a lot mobile devices in landscape mode. For example, I built a site which has a full screen video on the landing page: https://schroeder-moebel.de
Since I don’t want mobile devices to display the video, I hid the video at the smaller breakpoints. but if you view this page on an iPhone X in landscape mode, things get pretty ugly.
I remember awhile back there was some discussion about why Norm removed the XL Breakpoint and if it should be added back (it is a bootstrap breakpoint, right?), but I guess that really wouldn’t help matters either, since most of the new phones have landscape resolutions above 2200 pixels or so.
Actually what I looking for is some way to detect if the device is mobile or not and not just “how wide is the screen”?
I guess there must be something like this being done with javascript ???
That’s not quite right. There is a difference between screen resolution and device width. We had a thread going on early today about it.
Although you can do this (I have a couple of sites that check iOS, Android, iPad and displays data based on device, but the sites are CMS driven) the breakpoints already work really well across devices.
Hi @gary,
I took a look at your site in landscape mode and it was exactly as I expected to be. It’s not the desktop, it’s the tablet size. Nearly any website on a phone in landscape it will be the same. Remember, on a landscape phone the viewport isn’t very tall.
A good amount of work would be needed to get a landscape phone view to be much better than what you have. However, at the end of this post I’ve included the info you’ll need to do it.
The idea of making your site somehow optimized for phones in landscape mode really isn’t a thing of concern. You’ll be doing work that essentially very few websites care about or need. If your content is best viewed portrait, users will rotate the phone.
Unless you are making an application type of user interface, it’s just not necessary to cater to all these ways of viewing the site. Look for the obstacles to people doing business with you. From experience I can share that this would not register as an obstacle in the agencies I’ve worked for and with. and clients surely agree when they see the bill attached to this sort of “extra” effort.
…
There are of course times when the rule needs an exception.
Media queries support both device orientation and device-pixel-ratio
Thanks Whittfield, I agree with you in all points. I wasn’t aware that landscape mode on a phone with a resolution of 2688 x 1242 (iPhone XSmax) would use the tablet breakpoint. I assumed it would use the desktop one since the resolution is over 1200 pixels.
