February 18, 201511 yr I have run into a MQ issue, most devices the page renders beautifully, except on an iPad 3/4 and a Sony Xperia. The problem between the two devices, which I hope causes a ripple effect and fixes the problem with a few other devices is, the following, on a iPad 3/4 when set to portrait, the page breaks, on a Sony Xperia Sola set to landscape the page breaks. The iPad 3/4 has a screen width of 768px (CSS), my MQ is set to @media only screen and (min-width:767px), why is the page breaking ?
February 19, 201511 yr The iPad 3/4 has a screen width of 768px (CSS), my MQ is set to @media only screen and (min-width:767px), why is the page breaking ? Essentially I think the problem is that the iPhone is technically MQ wise 320px wide portrait ... "The <meta> tag is easiest to explain. Apple has deliberately invented it precisely in order to allow people to fit their content on an iPhone screen, and has pushed it with developers. That means that it can’t afford to change the device width as read out by the <meta> tag now. In fact, the Nexus One has already blazed a trail for Apple to follow. Its official screen width (in portrait mode) is 480px, but when you apply the <meta> tag it acts as if the screen width is 320px, 2/3rds of the official width." from http://www.quirksmode.org/blog/archives/2010/04/a_pixel_is_not.html
February 19, 201511 yr Author It's not the iPhone I'm having problems with, it's the iPad and the Xperia phones, including some Lumia phones. I'm currently in limbo as I can't apply a MQ that does not break on these phones.
February 19, 201511 yr I think it's not a great idea to target specific device width with media queries, instead I would target when your website needs to change. Once you hit a certain width and your website starts to scroll horizontally or looks bad, then make the necessary media query and start to look into a more fluid width. Good luck
February 20, 201511 yr Author That doesn't make much sense, the page works for most devices, successfully, except for two or three. Take for example the iPad, I have a min-width(767px) on landscape, everything is fine, on portrait the page breaks, lets compare that to the Sony Xperia Sola / Lumia Phablets where the results are the same, perfect on portrait, breaks on landscape, those issues I need to solve.
February 20, 201511 yr Can you post one of the MQ that break with a screenshot? To debug have you tried making a simple MQ, something like a bg colour change to double check what the problem devices 'think' the width and orientation are? Is the break to do with menus popping out of line or stuff not showing? Depending on what's breaking might be to do with some kind of 'extra spacing' by the device.
February 20, 201511 yr That doesn't make much sense, the page works for most devices, successfully, except for two or three. Take for example the iPad, I have a min-width(767px) on landscape, everything is fine, on portrait the page breaks, lets compare that to the Sony Xperia Sola / Lumia Phablets where the results are the same, perfect on portrait, breaks on landscape, those issues I need to solve. It's difficult to tell without some code, but once I moved away from device width and started focus on when my website needed to respond as a certain width everything became a lot easier with responsive. It's only my experience and your welcome to ignore it, but I'm thinking it would help you resolve your landscape situations as probably the real device width in pixels could differ and that is what is causing your MQ to break.
Create an account or sign in to comment