I'm having problems with my CSS media queries on iOS devices. I tried with and iPhone 11 Pro (safari, xcode simulator) and and iPad Air 2 (Google Chrome)
https://docs.google.com/presentation/d/1aNMcbX73dEDlokOhm2XPBkEjxCH_2iINBV3BbAT9-q4/edit?usp=sharing
The first slide shows how my website looks on the default Chrome configuration; mobile. As you can notice, it takes the media queries from a smartphone, instead of the 1024px media query I wrote.
The second slide is after requesting desktop view how it should look according to the media queries.
The third slide shows media queries applies properly on Android phone and not properly on Safari on an iPhone simulator.
<meta name="viewport" content="width=device-width, initial-scale=1" />
I wrote this html meta tag like this and nothing changes.
Source code if required.
https://github.com/erickcm2k/newProjectPortfolio/tree/master/portfolio
Update
Here is the path to my CSS reset file i got from: https://meyerweb.com/eric/tools/css/reset/
https://github.com/erickcm2k/newProjectPortfolio/blob/master/portfolio/src/Containers/reset.css
Everything worked fine after commenting this line
-webkit-text-size-adjust: 62.5%; /* Line 205 */
Related
Not sure if this is a browser compatibility issue or what.
I have a page with an IMG tag that's set with one .png file as its SRC attribute, and a second, separate .png file set as the CSS 'content' property within a CSS breakpoint for landscape orientation.
The swap-out works as expected when I resize a window in Chrome or Firefox on desktop — in a portrait orientation the image shows the first .png file, and if I resize to a landscape orientation the image switches its src/content to show the second .png file.
It also works as expected when using Chrome on mobile — holding the phone in portrait it shows the image as the first .png file, and if I rotate the phone to landscape the image src/content changes to the second .png file.
But when I try in Safari on desktop, or in Firefox on mobile, the image src/content doesn't change, and stays fixed as the SRC .png file.
I checked the browser compatibility table on MDN and it seems to show 'content' as working across all browsers as of very early versions:
Eg, if I'm interpreting the table correctly it says Firefox on Android has supported the 'content' property since version 4 of Firefox. Meanwhile the "About Firefox" page on my testing phone shows the installed version as 92.1.1
Am I doing something wrong here? Is the MDN browser compatibility table just incorrect?
#media (min-aspect-ratio: 9/7) {
#test_image {
content: url(https://picsum.photos/300/200);
}
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<img id="test_image" src="https://via.placeholder.com/300x200">
</body>
Turns out the problem IS a browser-compat issue, but not with the CSS 'content' property.
Apparently CSS media queries aren't supported in Firefox for Android until version 99, released April of this year. So that explains the FF results.
And it's likely the version of Safari I was using on someone else's computer may have been too old a version for media queries too.
GOAL:
Stylize a chat-interface on mobile devices.
PROBLEM:
I've thrown together a proof-of-concept for a chatbot. Everything is very simple, including the JS & CSS. While I'm also having a separate issue with JS (i think), this here is my CSS problem.
While developing, I tested in FF & Chrome, and scaled down the browsers to emulate the mobile-browser experience.
All the CSS media queries acted as expected.
Yet ...on any mobile device we test, the sizing specified in CSS media queries has no effect and we are left having to zoom in.
EXAMPLE:
temp.mosaranch.com/chatbot-tester
QUESTION:
What could cause mobile browsers to not render specific media-query CSS rules, while the rules are applied when scaling down on a desktop browser?
You need a viewport meta tag in order for media queries to work properly on mobile devices.
Read more at MDN: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
A typical mobile-optimized site contains something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
I have a big problem with Bootsrap and CSS media queries on mobile devices (phone and tablets). Basic I'm using default Boostrap grid with some CSS media queries to adjust few things (like to hide/show mobile menu from Bootsrap).
Based on a desktop browsers (Chrome and FireFox) all works fine and layout is responsive. In that case I have used col-sm- classes but on mobile devices it wasn't working (tested with Nexus 7 and LG3) so I have decided to see if col-md- and that grid works fine but shouldn't effect Nexus 7 in a landscape mode.
After problem with the Bootsrap grid I have a problem with regular CSS media queries like #media screen and (max-width: 768px) {} - is not triggered on Nexus7 or LG3 (should to be triggered at least in a portrait mode).
Site to see all those issues is here: http://bgcnj.org/
Any clue what is going on?
Add this in your header:
<meta name="viewport" content="width=device-width, initial-scale=1">
This will allow your mobile-specific CSS to be applied.
I have a Ruby on Rails app developed with bootstrap and have included media queries in my 'static_pages.css.scss' file:
#media all and (max-width: 1000px){
.header-logos
{
display: none;
}
}
There is more code within the #media queries but just keeping this short.
I have also included:
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
The responsive design works on my desktop as well as my nexus android device in chrome. I have also tested it on a samsung galaxy and it works fine.
If I load the website on an iphone or ipad (safari or chrome) the menue loads correctly but the rest of the screen goes blank (seems to flash for a second the correct display then goes blank)
Feel free to see the result by going to www.bathtub2boardroom.com
Any advice?
I'm having a strange problem that only occurs with IE9. I'm working on a web page that has a desktop layout, and a mobile layout. Same HTML, different CSS. The problem happens with the code below:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px), only screen and (max-device-width: 640px)
All browsers, with the exception of IE9, show desktop site as needed. Mobile browsers correctly show the mobile layout. The problem with IE9 is that it also shows the mobile layout.
Now if I remove the words "only" and "screen" from the above code, IE9 then correctly displays the desktop site. The problem is, then the mobile browsers also display the desktop site. I've done some research on this, and haven't seen anything on this issue.
Thanks for reading,
John
Just in case anyone is crawling SO for an answer to this, the above two answers aren't solving the core problem which is answered here - CSS media query not working in IE 9
Basically inline CSS3 media queries DO work in IE9 but you have to disable Compatibilty mode -
<meta http-equiv="X-UA-Compatible" content="IE=9">
The above meta tag needs to be placed before any other meta tags otherwise IE9 will default to compatibility mode on and will subsequently not work.
From what I can tell, it comes down to IE9 not interpreting "min-device-width" and "max-device-width".
According to http://msdn.microsoft.com/library/ms530813.aspx it does not support those properties, only "min-width" and "max-width".
In addition, http://www.w3.org/TR/css3-mediaqueries/#error-handling states that the browser is supposed to ignore properties that it does not recognize. Not so with IE9 it seems.
Yes, use the #media (max-width: 860px) instead of max-device-width.
IE 9 just gave me a heart attack. The project media queries did not work.
Then after some minutes of googling, you have to include the CSS in the HTML.
Inline styles only!
What a drag these IE browsers are!
I usually add this to my projects and it's been working for me so far:
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
IE compatibility mode solves the issue.
Go to Compatibility View Settings and disable the option Display intranet sites in Compatibility View.