I am having difficulties by this mobile responsive from portrait to landscape view. I am using this code
#media only screen and (min-device-width: 375px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 3){
but this code is for only iPhone x screen size, and it's not working to some different screen sizes. Is there a way/ codes that can apply for all mobile media sizes? Can you give me a tip, how is the right coding to do the responsive portrait to landscape? or is there a way can disable the mobile landscape?
Related
I'm creating a responsive landing page and when I test it in different tablet devices, there are adjustments I want to make (paddings, margins, etc). I managed to target the normal breakpoints but I need to target more specific ones such as:
iPad Mini - 768 x 1024 with 324ppi
iPad 10 - 810 x 1080 with 264ppi
iPad 9 - 768 x 1024 with 264ppi
Can I get this specific? When I try, it ends up messing up my non-ipad media queries.
use media query with same parameters like
#media screen and (max-width:768px) will works for and iPad 9
#media screen and (max-width:768px) and (min-resolution: 300dpi) will works for iPad Mini
#media screen and (max-width:810px) will works for iPad 10
If you want to be as specific as you can, try setting the min and max widths, as well as device orientation and pixel ratio:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait)
For more you can check this article: Popular Devices Media Queries
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've set my media queries to be:
#media screen and (min-device-aspect-ratio: 1/1) and (orientation: landscape) {
// code here
}
#media screen and (max-device-aspect-ratio: 1/1) and (orientation: portrait) {
// code here
}
I've had to include the device-aspect-ratio to offset the change in orientation caused by the soft keyboard in Chrome mobile. It works well enough, but when testing on iPad, I've found that when turning it to landscape mode, it sticks to showing the portrait styles instead of landscape.
It works for iPad on landscape when I remove the min-device-aspect-ratio for the landscape styles, but then this causes the orientation to change from portrait to landscape on Chrome mobile view with soft keyboard. Does anyone know of any media queries to account for both these situations?
what happens when you switch it around? ie
#media screen and (orientation: landscape) and (min-device-aspect-ratio: 1/1) {
// code here
}
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'm using Twitter Bootstrap to responsive website and I don't understand the difference between
#media screen and (min-width: 768px)
#media (min-width: 768px)
"Screen" or not? any help?
http://www.w3.org/TR/CSS21/media.html#at-media-rule
#media screen is computer screen, so
The first rule is for computer screens only with resolution width at least 768px.
The second rule is just for devices with width >=768px including tablets, phones, printers etc., that have high enough resolution.
screen is a media type and means that rule will be used on computer screens. Without it it's just a general rule and will be applied for all media types.
The browser identifies itself as being in the “screen” category.
Specification
applies to devices of a certain media type (‘screen’) ,screen is intended primarily for color computer screens. So it identifies roughly to modern devices desktop smartphone etc
So it will work for color computer screens at differing resolutions e.g.
Mobile
only screen and (min-width: 480px)
Tablet
only screen and (min-width: 768px)
Desktop
only screen and (min-width: 992px)
Huge
only screen and (min-width: 1280px)