So I’m doing the media queries for my website on my 25inch monitor. I’m shrinking the design and adjusting it as I go, and I noticed that for instance when I’m viewing my website on an ipad pro as shown here https://imgur.com/a/6FELGks Everything looks too small? This is strange because I’ve done my media queries for a max-width of 1024px which is the width of the ipad pro and it looks proportionate here
https://imgur.com/a/FG12aj8 Then I realized the 2nd factor on any viewport, and that’s the height of the screen! Does this render all of my media queries useless since they all revolve around width? Now knowing that the height will affect the proportions of the content?
Do you have a link to the actual site so we can check for ourselves?
I assume you have the viewport meta tag in place?
Not if you have coded correctly as height is seldom an issue as all small screens will need to scroll vertically. It may be an issue if you have not allowed for large images to scale smaller proportionately and they take up too much space vertically. This has nothing to do with media queries as such but relies on the way that you have decided to manage content for smaller screens.
Small screens are not just shrunken versions of large screens and you will need to re-organise and control your design at suitable breakpoints. You don’t need to go overboard with this if you have created a fluid design to start with and a few well chosen media queries will suffice. You can do this all on your desktop; just grab the browser window edge and drag the browser slowly down to 320px. If at any point the design looks odd or doesn’t fit then that’s the point you add your media query. Do not try to guess what size a device is because there I believe about a 1000 different variations of devices these days. Forget about device size and code fluidly for everyone.
Sometimes you may have a large splash image and if you are just scaling its width then on a small screen the height will be too small. Try to scale images proportionately. If this is not possible as in the case of many sliders then you can make sure that you adjust the height in your media queries for that image so that it is not too tall. This assumes that you are maintaining the aspect ratio in some way.
If there is an absolute need to detect the height of the device (which in the case of fixed position elements may be a necessity) then you can use the odd media queries based on height in the same way that you would with width. I occasionally use height media queries when I have a fixed sidebar that is a fixed height and I ensure that the sidebar is never taller than the viewport height.
On most sites you will rarely need to use height media queries unless there is something in the design that calls for this.
The most basic premise is to code fluidly and let your images resize proportionately and once the screen width is quite small think about reducing or removing big splash images altogether. Sliders and big splash images in an iphone5 or similar just get ion the way of content.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.