My media query works on Android in all browsers but not on IPhone. I have IPhone 6s Plus and when I opened my website, it crashed the page. On other IPhones it's just css in mess. What's the problem?
#media only screen and (max-width:768px) and (orientation : portrait) {}
Just use :
#media (max-width:768px) {
}
In my opinion, the other parameters are irrelevant, they just lead you to messy stylesheets.
But keep in mind that a better approach may be to set breakpoints based on content and layout.
I advise you to read this SO Post
Related
Total NOOB at web development and trying to teach myself here and it’s quite daunting to say the least, but I’m having fun nonetheless.
Anyway, I know that media queries affect the way mobile devices render the page on various screen sizes, but I want to know if there’s just one media query that can affect ALL mobile devices regardless of screen size?
I just want to make sure it won’t affect the Desktop.
For instance I want to tweak a navigation menu on all mobile devices, but I don’t want to meticulously change each media query that pertains to a screen size in my style.css.
I just want to create one media query to make this tweak that will affect all mobile screen sizes.
Hope that makes sense.
As always, you all are awesome!
Thanks for your help!
happy that you are choose to learn Web-Development.
But your way sounds more complicated than it is. First, Desktop and Mobile can be the same at all. It only counts down to Media Queries. On a Desktop, your Browser can be have the same width as a mobile device. So you need to clarify in your Project at which point you want to show the User the "Mobile" Styles and when to display the "Desktop" Styles. In most Projects I worked or saw, the default Media Queries are something like that:
#media (min-width: 320px) {}
#media (min-width: 768px) {}
#media (min-width: 1024px) {}
#media (min-width: 1220px) {}
#media (min-width: 1440px) {}
So you see on every media query you can attach some new styles for the selected query size. To make its easier for writing styles and don't override all these things on every new width, you can make something like that:
#media (min-width: 320px) {} // for general stylings (both, mobile && desktop)
#media (max-width: 767px) {} // for only styles between 320px and 768px (most mobile devies)
#media (min-width: 768px) {} // general desktop && tablet styles if needed
#media (min-width: 768px) and (max-width: 1024px) {} // only tablet styles
#media (min-width: 1025px) // start with desktop styling
All these styles between the media queries are only attached to the sizes.
So just choose your needed width, for example:
All mobile styles attached only between 320px and 1024px
#media (min-width: 320px) and (max-width: 1024px) {
.nav{ background: red; }
}
All desktop styles attached only after 1025px
#media (min-width: 1025px) {
.nav{ background: green; }
}
All these media queries just show the different widths, you also can do this by heights, but its way more difficult because of the device/display sizes.
If you really want to check the User Agent and divide between the browser, agents, devices or something like that you will need JavaScript and thats way more complex than just display the styles for different widths.
I hope this helps you! If you have any questions about Media Queries and how to write them correctly, MDN is a good resource: MDN - Media Queries
For anyone looking for a generic and easy media query for mobile, I would suggest the following:
#media screen and (max-width: 767px) {}
Similar to the suggestion by #m4n0, but this is the correct query including the "and". This is a good start, and then you can continue to define more breakpoints as you need more responsiveness along the way.
It depends on is your mobile layout is designed. As even in the mobile view you need to think about Portrait and landscape mode.
For some common styling, I normally use
#media screen (max-width: 767px) { }
You can also use orientation to set media queries like below
#media screen and (max-device-width: 480px) and (orientation: portrait) {
Your classes here
}
#media screen and (max-device-width: 640px) and (orientation: landscape) {
Your classes here
}
Great question, Android and Apple devices in my search normally fall within 450px in portrait and 800px on landscape, I would suggest you create a media query for both these sizes and you would have covered a high number of mobile devices in both portrait mode and landscape mode. If you are targeting a specific device I would suggest looking up those specific screen viewport sizes and adjusting or adding more media queries to cover those cases. Hope this helps! Keep learning.
Credit to following link for Popular Device Screen Resolution Sizes
https://mediag.com/blog/popular-screen-resolutions-designing-for-all/
Credit to following link for great explanation of Responsive Design
https://www.toptal.com/responsive-web/introduction-to-responsive-web-design-pseudo-elements-media-queries
I am using this code:
#media (min-device-width: 400px) and (max-device-width: 1020px) {
.gform_wrapper.two-column_wrapper ul.gform_fields.gform_column {float:none !important;}
}
When I view the website on the actual tablet, the code seems to work fine. However, when I view the site on a tablet emulator website, it doesn't work.
Am I doing something wrong with the syntax ?
As far as I understand the emulator is not treated as a "device", therefor the media query does not apply to it. The emulator is likely opening the website in an iFrame, so a simple min/max-width query will apply.
change this:
#media (min-device-width: 400px) and (max-device-width: 1020px) {
.gform_wrapper.two-column_wrapper ul.gform_fields.gform_column {float:none !important;}
}
to this:
#media (min-width: 400px) and (max-width: 1020px) {
.gform_wrapper.two-column_wrapper ul.gform_fields.gform_column {float:none !important;}
}
Here is why:
It is also possible to create queries based on *-device-width; though
this practice is strongly discouraged.
The difference is subtle but very important: min-width is based on the
size of the browser window, whereas min-device-width is based on the
size of the screen. Unfortunately some browsers, including the legacy
Android browser may not report the device width properly and instead
report the screen size in device pixels instead of the expected
viewport width.
In addition, using *-device-width can prevent content from adapting on
desktops or other devices that allow windows to be resized because the
query is based on the actual device size, not the size of the browser
window.
I'm working on an asp.net site and making it responsive, just using #media commands in the stylesheet.
Usually when I work on apache websites, e.g. wordpress as soon as I refresh the page, I can resize the brower to a mobile or tablet size and see the changes on a PC browser. But with this .net site the changes don't show.
They do show however on my actual mobile phone, but I don't want to have to keep previewing changes through my phone.
I've tried using an emulator like mobiletest.me but that doesn't display the changes either. I've tried using Firefox and Chrome, neither work. It seems the website isn't being fooled into thinking my browser is a mobile.
Anyone have an an idea on what this issue could be?
Thanks
UPDATE
Sorry code below:
#media only screen and (max-device-width: 480px) {
#block1 {
display:none;
}
An educated guess says that you are using a specific media query for devices, rather than resolution alone, which is why it's not responding when you resize the window.
Mobile devices: (what i suspect you have)
#media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
Based on Resolution: (what you require)
#media only screen
and (min-width : 320px) {
/* Styles */
}
For my CSS media queries I've set it up mobile first which deals with all the overall styling.
I then have:
#media only screen and (min-width : 790px) {
}
#media only screen and (min-width : 990px) {
}
and I've added in
#media screen and (orientation: landscape) and (max-width: 520px) {
}
which deals with the CSS changes when the smart phone is turned round to landscape mode, but it doesn't seem to work, am I writing the landscape media query wrong?
Had a similar issue: my iPod/iPhone devices were detected as portrait orientation even when rotated.
I managed to resolve that with the following media query:
#media screen and (min-aspect-ratio: 4/3)
{*your styles here*}
If you want to target any case when width is greater than height, I think something like (min-aspect-ratio: 101/100) or something like this might work. However, for current devices 4/3 is sufficient, I think.
If you need aspect ratio for landscape, I think min-aspect-ratio: 1 suffices ... and therefore max-aspect-ratio: 1 for portrait.
But, even when the CSS is correct, there's an additional step required for a Cordova / PhoneGap app: Why doesn't my Cordova/PhoneGap iOS app rotate when the device rotates?
I found this StackOverflow item before that one, so perhaps others will also find a cross-link useful.
I know there is a lot of topics out there about media queries, but tonight I'm stuck on this:
I'm targeting many Smartphones and specifically Samsung Galaxy S3 with this :
#media screen and (max-device-width: 720px), (min-device-width: 721px) { .. }
it works well for both portrtait and landscape! But I don't know why, in this way I am also targeting Ipad landscape mode, which I don't want to! In case I'd rather prefer to target portrait view of Ipad together with smartphones!
To be clear, what I want to achieve is to have 2 versions of a website, default is a layout of max-width 960px and a smaller version that is very good for Smartphones and good for Ipad and other tablets on portrait.. Now the mobile version is working on smartphones but to little on Ipad...
I know that I could target Ipad directly, but I don't want to replicate many css rules that would be the same of desktop!
The problem appears to be with the syntax of your media query. You've used a comma instead of and and I think you have max/min around the wrong way. For CSS Media Queries a , is the OR separator whereas AND requires multiple queries to be true.
Your media query should instead look like:
#media screen and (min-device-width: 720px) and (max-device-width: 721px) { .. }
Or written more succinctly you could use the specific device-width:
#media screen and (device-width: 720px) { .. }
Using this method you could target Galaxy S3 portrait and landscape by using the comma, ie:
#media screen and (device-width: 720px), (device-width: 1280px) { .. }