As you can see from the screen, I do have a media query CSS
#media only screen and (max-width: 600px) {
.block {
background-color: lightblue;
width: 100%;
margin-top: 20px;
}
}
But for mobile device with under 600px, the block won't able to display lightblue background; but resize with desktop browser works.
Why?
detail code with here: https://codepen.io/dotku/pen/VwZGKYV
The comment from #Reza works, that is add viewport meta.
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
I don't know what mobile device you're testing on, but I'm assuming you're not aware of the difference between device pixels and actual CSS pixels: CSS pixels are an abstraction over the real pixels in your device's specs to make webpages appear consistent on all the different device sizes.
Formula:
CSS pixels = Physical resolution / Device Pixel Ratio
The Device Pixel Ratio itself is determined by each browser on each device independently.
On my phone, your codepen works fine and displays blue. I recommend checking out this codepen, which will reveal your Device Pixel Ratio and logical resolution. Most likely your device has a CSS width larger than 600px.
On my phone, given codepen example works without meta tag (color change, meta tag is just for scaling, so this means that #media query is read properly).
Also, some new phones or phablets have virtual resolution 800px in portrait mode, so website should be tested on those devices.
If color doesn't change, try deleting Chrome cache on mobile phone: https://support.google.com/accounts/answer/32050?co=GENIE.Platform%3DAndroid&hl=en
I had the same problem two days ago, especially yesterday after Chrome was updated (seemed just to ignore any changes to #media queries, which showed properly on desktop in responsive mode).
After testing website with Firefox for Android (worked properly), and also with Chrome failing to reflect some changes to CSS outside #media query (background-color), it was obvious that Chrome didn't load changed CSS file from the server, but used some older locally cached version.
After deleting browsing cache, everything works as it should be (even after CSS file was changed a few times after this).
Related
I am currently attempting to get a website to display some plain text with appropriate font sizes on both a desktop and mobile browser. Trying to choose a font size for both results in the text being too large on desktops and too small on mobile because of the different displays.
I have attempted using a media query to change the font size based off of the screen width.
#media screen and (max-width: 900px) {
body {
font-size: 2em;
}
}
This "works", but it comes with the caveat that resizing a browser window on a desktop will result in changing the font size if the width goes to or below 900px. I never want the font size to respond dynamically to the browser size. It should always stay the same size regardless of any window resizing that occurs. I will not consider vh and vw as solutions because of this requirement.
While searching around for solutions, I came across using dpi in media queries as an alternative. Since I assume the vast majority of mobile devices have a higher dpi than most desktop monitors, that could be a good way to change the font size on mobile.
#media screen and (min-resolution: 150dpi) {
body {
font-size: 2em;
}
}
But what if there is a monitor that does surpass this dpi? This works for the 3 devices I am testing with, but I cannot be sure that it will work in more cases.
Overall, my aim is to get something like the setup Wikipedia has. https://en.wikipedia.org/wiki/Dots_per_inch The font size does not change when resizing the browser, it displays at a readable size consistently on both mobile and desktop browsers, and I assume it will work quite nicely on a high dpi monitor as well, but I have no way of testing that.
So what is the appropriate way to get the functionality I am looking for?
After writing this question but before posting, I kept on searching for a solution and I found it. It's actually very simple, but easy to miss. I hope posting this helps others in the future. It all boils down to this line within the head of the html.
<meta name="viewport" content="width=device-width, initial-scale=1"/>
It's explained nicely here.
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Average font-size for resizing screen you can get by using stylesheet calculator and properties like:
vh - viewport height
vw - viewport width.
Your font size will take same size on your view, but it can be unreadable if you don't handle small sizes layout.
For regular size: font-size: calc(.5vh + .8vw);
For large size: font-size: calc(5vh + 5vw);
I read that most media queries use viewport width to determine whether your are on a phone, tablet or PC. I am building an image grid with 1000s of small thumbs in an endless grid. Each thumb is 125px and on my laptop (MacBook 13") I can easily fit 9-10 thumbs in one row - which gives a fine user experience. If I take the same code to a nexus 5, which has 1080px across I get 6-7 thumbs, which is a bad user experience. the nexus is 6-7 cm across and the MacBook is 25'ish cm - big difference.
My approach would be to detect whether the device is a mobile or pc and the scale the thumbs - big ones for mobile (say 250px) and small for pc (125px).
But how do I detect the device. If I use width I basically have to go with a min-width of 1100px to catch most new phones. I could also go with resolution, mobile phones generally have higher DPIs than PC/laptops.
Or do I have this completely wrong?
I am writing the app in React.
It's not that your Nexus 5 renders webpages at 1080px wide, it's that your site is not performing responsively to fit your phone screen, so it's rendering as a zoomed-out desktop site.
You need to add this viewport meta tag to your site's <head>:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Once that's in, your Nexus 5 should render webpages at something closer to 400px wide, and you can base your media queries around that.
Here's how you'd make your thumbnails 125px wide for screens under 480px wide:
#media (max-width: 480px) {
img {
width: 125px;
}
}
I'm building a HTML email and have been using Chrome emulator to test the responsive states but now the emulator isn't triggering the media query.
#media only screen and (max-device-width: 480px)
Any thoughts?
I've tried restarting multiple times and the emulator works fine on other sites. Attached is a screenshot showing what happens when i select the "body" element in Console.
EDIT
The problem is due to removing the viewport meta tag, yet this is advised to be removed from responsive emails... Anyone know a solution for this?
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Try using max-width. Chrome emulator shows responsive email correctly on my Chrome and I use it on all my templates.
#media only screen and (max-width: 480px)
max-width is better than max-device-width because of multiple reasons. Primary one is that to trigger certain Android phones, if you used max-device-width, you had to set it to horizontal resolution (1920px on some phones on landscape!), while max-width had to be set to viewport width (which is around 480px). On iPhone both are the same last time I checked.
It is best practice to use max-width in email media queries.
Also, you don't have to put 480px, I tend to set higher values, either 580px or 1px less than outer container width.
I'm having an issue with how my site is being displayed on my ipad. I've tried to set the viewport to:
<meta name="viewport" content="width=device-width, initial-scale=1">
Which can be seen at http://erichschubert.com/viewport.html.
But it always results in my site appearing zoomed in and even when zooming out, the whole site is not visible.
As of now I have it running with:
<meta name="viewport" content="width=1024">
Which can be seen at http://erichschubert.com.
It appears fine, however, when the ipad is turned to landscape it zooms in and leaves a huge black sidebar on the right side.
The header on the site has a fixed position and is also not displaying properly when zoomed in. Is the issue simply that it is fixed? I would love to able to display the whole site in both portrait and landscape and also be able to zoom in uniformly.
Thank you so much for any help in advance.
The initial-scale=1 is only practical if you use it alongside media queries, so it accurately scales the page to fit the custom styles for that media query.
Changing it to width=1024 only forces a fixed page width, which is no use in your case.
The smoothest way to have a page scale without zooming issues is to use media queries, to allow it to resize depending on the screen size.
Most devices will re-assess the screen width when they detect a change in orientation, while others will simply zoom in to fit the portrait layout to the landscape view.
If you want to be sure, you could use:
#media only screen and (orientation:portrait) {
/* portrait stuff here */
}
and for landscape:
#media only screen and (orientation:landscape) {
/* landscape stuff here */
}
I wouldn't recommend being so specific as to target individual devices, it's a never-ending workload. 'iPad' used to mean 768px x 1024px, but now covers 2048px x 1536px too. There will always be new devices, but they will all be targetable via simple media queries.
I'm a relative newcomer to CSS, and I recently figured out how to use #media to query for a device or browser size, and help make the site responsive, but I've been having a lot of trouble with the <meta name="viewport"> tag (as I see a lot of other people have too).
The shift to the mobile view triggered by #media only screen and (max-device-width: 680px) is working just fine, but so far, on both iPhone and Android phones that I've tested it on, the initial view is partially zoomed in. For the mobile view version, I have the body, the container div, and the child elements sized at 540px or less and then used the following tag in the head of the html doc:
<meta name="viewport" content="initial-scale=1, width=device-width" />
But like I said, when I visit the site on a mobile device (like my Razr M, which has a screen resolution width of 540px), the viewing area shows up zoomed in, so that what I see is about 2/3rds of the full 540px of content, starting from the left. But then, if I manually zoom out, it stops at the correct size and everything looks good. The test site is up at http://thereisnomountain.com/indextest.html, and it relies on one stylesheet at http://thereisnomountain.com/style/tinmtest.css. Help would be appreciated!