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
Related
I use #media screen and (max-width: 600) on my site. But my iPhone doesn't react on it. He displays full site like my desktop browser does. I added this snippet of code:
alert(document.documentElement.clientWidth);
alert(window.innerWidth);
When I go to the site via my desktop browser, it shows actual width of my window. But when I do it via my iPhone, it always says that screen's width is 980, both of the alerts. Why does it happen? What of #media can I use to make my site responsible, because (max-width) and (width) dont work for me
<meta name="viewport" content="width=device-width, initial-scale=1"/>
This helped me.
To fit my WP website for mobiles I use
#media screen and (max-device-width: 780px) {}
However, to fit everything properly I have to use giant values, like font-size: 4em;, header {height: 200px;} (when it's 100 on the desktop version). Is it normal?
The main problem is with Gallery plugin - by default thumbs have size e.g. 200x300, and on the mobile version they are really tiny!
Or maybe there is a better way to make a website mobile?
If I had to guess, I'd say you are not setting your viewport
<meta name="viewport" content="width=device-width, initial-scale=1"/>
Nowadays, most mobile phones have a very high dpi; for instance, the iphone 6 plus has a full 1080p display, so when you make something 100px tall, it is only 1/19 of the screen height.
By setting the viewport to the device-width, you are telling the browser to render the page using a more standard dpi (for instance, the iphone 6 would be something like 424x600ish). That way, all of your content automatically scales.
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 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/
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.