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?
Related
Currently I'm working on a webApp which will be displayed on two different TV screens.
One will be in landscape mode, and the other one will be in portrait mode.
So, I coded this app with CSS media queries to make it adaptable in those two configurations and for different resolutions.
I used queries like this for example:
#media screen and (orientation: portrait) and (min-width: 2160px) {
}
#media screen and (orientation: landscape) and (min-width: 3840px) {
}
The application is working perfectly fine on browser.
But when I try my app on vertical screen, obviously the TV display it on landscape mode (because this is just a screen which is rotated).
But the problem is, when I change the parameters on TV options to display the image as portrait, the app has just rotate and the image has expand to the border of the screen. None of my CSS media queries has done this work like on the browser.
If someone have a technical explanation and/or solution, I'm looking forward to hearing from him/her.
Thanks
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'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)
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.