I am currently on an website which needs to be fully responsive in screen width and pixel density. My major problem is how do i get the responsiveness for HiDPI devices such as the galaxy s4.
I have read about the min-device-pixel-ratio but I do not fully get it and my attempts do not work. All my less/css is using rems as units, so basically I should be able to just manipulate the font-size ond the html tag, to get what I want, right? But maybe this is bullshit?
However, I wanted to ask for best practises and tips and tricks.
Whats important to me is, that I don't have multiple versions or subdomains for desktop and mobile devices. I want to do it all with media queries.
Thank you very much in advance. I really appreciate your help!
Cheers
Hidpi only means that 1 css pixel is rendered with 3x3 actual pixels (this varies for devices, iPhone pixel density is 2- so on iPhone 1 css pixel is made from 4 actual LCD pixels.). Websites on galaxy s4 are still rendered as 360x640px with pixel density 3, so you don't need any additional css for HiDPI devices.
you only need to add this meta tag in year head section
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
and apply css as for regular non HiDPI device.
To addition what pankijs wrote, notice, that different browsers (chrome, android native browser, firefox etc.) handle media queries in different way. For example if you use:
#media only screen and (max-width : 480px)
it would work on Desktop Chrome browser and on android smartphone browser, but not on Safari on iPhone. To make it work on Safari you have to use:
#media only screen and (max-device-width : 480px)
The conclusion is that you need test your media queries on physical devices :) For more information, check this page: http://www.w3.org/TR/css3-mediaqueries/
Related
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).
I'm trying to make my site fully responsive, but it doesn't display at all how I expect it to. I'm using media queries in css and the <meta name="viewport" content="width=device-width"/> tag, but it doesn't help much. Without the <meta> tag it does display correctly I suppose, but of course the pixels are quite small on modern smartphones.
While searching for this issue I found a page about mobile displays, which makes me understand it a little better. If I get it right, this page mentions that phones pass 'false' information about their resolution as to not show websites too small.
This doesn't make it that much easier, however. My Samsung Galaxy S5, for example, has a resolution 1080 × 1920 pixels, and loads the css that is within #media screen and (max-width:720px) {} in both portrait and landscape mode. For my site, it's good that it does that in portrait mode, but in landscape mode I really need it to display the regular css.
Long story short, how would I solve this? How do I know what 'false' resolutions phones pass and make sure that whatever I do works correctly for all mobile devices?
EDIT: the site does NOT respond at all to #media screen and (min-width:720px) and (max-width:1920px) in landscape mode.
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 have created a responsive template and I have the following problem.
I created a media query for resolutions smaller than 480px on desktops and smaller than 540px for phones. On the desktop it works fine, on the phones it works as expected.
#media only screen and (max-device-width: 540px),
screen and (max-width: 480px) {
so, whenever I open the site on a tablet, I get the desktop version loaded (as expected) but with a zoomed-in result.
If I use the following code, with maximum scale at 0.6
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=0.6">
I get tablet view correctly, but then in phones it's zoomed-out.
I have searched everywhere and tried every combination in order to make this work. From what I realize I want maximum-scale=1 for phones and 0.6 for tablets. How can this be achieved?
Thanks in advance for your time. Hope it can be done.
edit: removed url.
That's because the maximum-scale is set to 0.6. This means the website is showed at 60%. Try leaving that out or set it to 1.0
This mobile website:
http://www.tomorroworld.com/instarea/
Looks good both on iPhone 4 (Retina Screen) and regular iPhone screens. But on Android phones, it's too much zoomed in. How can I fix this easily?
This is what the viewport tag looks like:
<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,user-scalable=0"/>
Consider converting your widths to be based on percentages rather than pixels and then let them scale down in smaller devices. You could also add in some media queries for additional layout control at smaller sizes.
Using viewport as you have is essentially hard-coding your page width at 320px for all mobile devices - works great for older iphones but not for many other devices.