I'm using the standard mobile first method for a responsive site which works great for most phones. my current mobile breakpoint is
#media only screen and (max-device-width : 768px)
however, this does not pick up my new turbo 2 or the iphone 6 as both of these phones have screens that register at 980px.
does anyone have a good media query style fix?
Related
My website works on all mobile devices and desktops up to 5120px in width, I used media queries for portrait and landscape versions on my phone and the landscape worked perfectly for laptops and PCs alongside "min-width". However now that I'm dealing with an ultra wide monitor the bottom of my container gets cut off by the bottom of the screen. The media queries I have used so far go like this:
#media (min-width: 540px) and (orientation:landscape)
#media (min-width: 540px) and (orientation:portrait)
I used the width of the device in either landscape or portrait alongside its orientation and was happy with the results despite the effort, now Im stuck wondering what to use for most ultrawide devices to work?
I used media query to put my Homepage from Smartphone to Tablet and for this I used the size of a iPad 1/2.
After I finished my Website (for Tablet) it was looking fine on my Acer Tablet but on my Girlfriends iPad its completely messed up because its seems like its not loading the Tablet Version.
Is my Media-Query wrong but if this is the Problem why is it on my Acer Tablet fine?
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1)
If you want I can put in pictures of the fail iPad Version of the Homepage
That's probably happening due to the devise orientation (Portrait, Landscape).
iPad screen sizes
I have this media query for my mobile display
#media only screen and (max-width: 760px), only screen and (max-device-width: 760px)
But other phone device works fine whenever when I turn landscape view in mobile. But iphone 6 and Mini iPad won't display when landscape view. What exactly do I need to add to let the device work and display?
Iphone 6 and iPad have an horizontal resolution bigger than 760px so both media queries are false and whatever css rule you have inside will not be applied.
You need a "tablet" rule for the landscape mode e.g. with 1024px or even higher breakpoint
I keep trying and trying, but my media queries are not working for iPhones.
#media only screen and (max-device-width: 667px) {}
It's supposed to support all the iPhones, up to the 6 Plus. Can someone help?
In terms of targeting just certain versions of the iPhone / iPhone 6, this post provides a helpful response: iPhone 6 and 6 Plus Media Queries
To support all small devices, under the 667px mark, you can generalize your media query to:
#media only screen and (max-width: 667px) {
...
}
If you are testing this on your desktop, just with a small window size, the reason the max-device-width may have not been working for you is:
width versus device-width
In CSS media the difference between width and device-width can be a bit muddled, so lets expound on that a bit. device-width refers to the width of the device itself, in other words, the screen resolution of the device.
Source: http://www.javascriptkit.com/dhtmltutors/cssmediaqueries2.shtml
I am using the following media query for my site
#media (max-width: 976px) {}
I am finding that when i view my site
http://46.32.253.11/
on the ipad 3 in landscape mode the navbar button that appears in portrait mode doesn't work and my navbar is split over 2 lines.
Do i need to add another media query, or can i edit the existing one. If so what changes would i need to make.
Im really new to media queries so if anyone has an excellent resource they would like to share that would be great
Have a peek at this css-tricks article which has a bootstrap for standard device resolutions: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
There are specific media queries for landscape and portrait listed below:
/* iPads (landscape) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
I want to stress, though, that from a "mobile-first" approach, you shouldn't be designing for devices, but rather for resolution breakpoints that fit your design. Try starting with a very small resolution, like 320 x 480. From there, increase the browser width until that design "breaks" (i.e. looks like crap) and then add a breakpoint at that resolution. A handy way of checking the browser width is to open up your developer console in Chrome (or Firebug for Firefox) and typing in document.body.offsetWidth and hitting enter. That will show the pixel amount of the width of the browser. Keep adding / rearranging things until you get the experience you want on a wide range of devices.
The web is moving forward. This means that we have to think about smartphones all the way up to TVs and projectors. Design your site with that in mind.
I hope this helps.