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.
Related
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 */
After developing a responsive webpage for practice using Pycharm and Firefox web dev tools, I uploaded it on Github. It appears to work just fine in the browser on my laptop, but when I attempt to use it on my Galaxy S9, it has the exact same font sizes as it would if I was using a laptop. It simply doesn't look like it should.
Screenshot on laptop:
laptop image
Screenshot on my phone:
smartphone image
What am I doing wrong? Here is the code if you want to see it.
Your HTML document is missing the viewport meta tag. Try adding <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" /> to the index.html file. After this has been added, the viewport in Firefox on your smartphone should conform to your mobile styles.
I am developing a website with slightly different CSS code for desktop and mobile. On mobile I use vw units for responsive font-sizes, which is preferred over media queries as mobile screen sizes change every other year and a different approach would require me to update the media queries as well every time.
Now, I think I have found buggy behaviour in Chrome mobile when it comes to font sizes with vw.
I kindly invite you to check out these two pages on mobile, both with Firefox and Chrome:
http://gusto-gelateria.al/
http://gusto-gelateria.al/ice-cream-recipes/
Firefox is correctly showing the font-sizes as i expected, while on Chrome:
font sizes are wrong throughout the page
the font size in the footer on the first page is different than on the second page ( footer fonts are the same on both pages on Firefox, as expected )
Am I missing something here, or Chrome doesn't handle well vw?
If this is not an obvious coding error I did, I may file a bug, but I want a confirmation before doing it.
Take as an example this vw declaration for the footer:
footer address div {
display: block;
font-size: 3vw !important;
}
That declaration appears in both browsers' dev tools as well, so it is being rendered both on Firefox and Chrome, but apparently they interpret it in different ways.
As I said above, my CSS for mobile is different than on desktop, so for inspecting it you should use the mobile device emulation from the browser dev tools (for Chrome see https://developers.google.com/web/tools/chrome-devtools/device-mode/ )
I believe that the root of your problem is that you don't have a viewport meta tag in the head of either of your pages. Without this, the default behaviour of browsers is to scale the page to fit the screen.
Start by adding the viewport tag in the head of all your pages:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title here</title>
...
</head>
Once you do this you'll see more consistent behavior between browsers, and from one page to another.
More about the viewport meta tag
Hope this helps!
The font-size difference is likely Mobile Chrome font-boosting. Elements with dynamic height get boosted automatically. A solution is to give the element or parent a max-height:
.parent {
max-height: 999999px;
}
But it's probably best to apply that max-height directly to the element containing your text so it doesn't effect anything else you might be doing in your layout.
Test it on a real device, since Chrome's Dev Tools doesn't show the boosting.
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'm Making a website for Desktop+iPad. Site look fine in Desktop browsers including Safari.
but in iPad fonts are big and breaking the layout.
This problem can be solved if i use
body {
-webkit-text-size-adjust:none;
}
But according to this info http://www.456bereastreet.com/archive/201011/beware_of_-webkit-text-size-adjustnone/ this code applies to Desktop Safari. user in Desktop safari cannot adjust the size which is not good for site's accessibility
is there any other alternative to solve this big text problem in iPad.
Use this instead:
-webkit-text-size-adjust:100%;
Also, make sure you are setting the initial zoom setting to 1 in your viewport meta tag:
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />