I've researched this question and tried to solve it on my own for hours, to no avail. Hoping one of you can help. I am using this media query for the style I want on a desktop browser:
#media all and (min-width: 320px) {}
And I'm using this media query for the style I want on mobile browser:
#media screen and (max-width: 320px) and (min-width: 0px) {}
When I drag the desktop browser to less than 320px, the style changes accordingly. But when I bring up the website on a mobile browser, it displays the desktop style. What am I doing wrong?
You need to include this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Hope it helps!
Related
I am referencing this guide on how to "make a mobile friendly website." It does not seem to be taking effect on my Chrome-Browser for Android.
#viewport {
width: device-width ;
zoom: 1.0 ;
}
I added this to my Django static files in app.css and it is definitely on the website because I can see it using Chrome Developer Tools on my laptop. However, when I use my Android phone (Galaxy S8 if that matters) it does not fit to screen.
I also have this in my base.html that my entire site is using:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Some follow-up questions: Do I need to empty the cache on my phone? How can I use Chrome Developer Tools on my phone to inspect the CSS of a website?
From What I understand that is just a css based replacement for the following HTML meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
I would suggest using the above meta tag in your index.html In addition too this you will still need to add #media queries to actually make it responsive for the various screen sizes.
// Extra small devices (portrait phones, less than 576px)
#media (max-width: 575px) ...
// Small devices (landscape phones, less than 768px)
#media (max-width: 767px) ...
// Medium devices (tablets, less than 992px)
#media (max-width: 991px) ...
In addition to the above PX based breakpoints, you can also use DPI-based break points: https://css-tricks.com/snippets/css/retina-display-media-query/
But to actually answer your question about the remote debug console I don't know about anything else that workes as well as the Chrome Developer tools for mobile (Ctrl + Shift + M)
use <meta name="viewport" content="width=device-width, initial-scale=1.0">.
On my site, im using standard css to apply for everything, except
#media (max-width: 480px) {
if my screen/browser is equal or lower than 480, it uses whatever thats under that media.
But my problem is that it dosent work on my iphone (iphone 5S).
I was able to find out that #media (max-screen-width: 480px) { would work, but then my browser width on 480 wont apply to it.
I have searched around different sites , but all i see of their entire css files, is that they only use max-width, and while vising their pages, it works great on my phone.
Question: How can i easily do so it would apply for both browser and screen/mobile?
just add this indise your head tag
<meta name="viewport" content="width=device-width">
and css:
#media screen and (max-width: 480px) {
// code goes here
}
It's my understanding that this query would target specifically my iPad Air 2 and apply the styles that I have added. However, nothing is applied and it looks the same as the Desktop view. I had to apply a different menu for my website to scroll properly on my iPhone, (overflow-y:scroll / hidden didn't work so I created multiple sections that display menu options as opposed to displaying the content in a div) but I'm having troubles targeting iPads as they also do not scroll properly.
#media only screen and (min-device-width: 1536px) and (max-device-width: 2048px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio: 2) {
/***
my css goes here
**/
}
The following works on iPad Air 2
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2)
Put this meta tag in before the query:
<meta name=viewport content="width=device-width, initial-scale=1">
You can read more about what it does here: Responsive Meta Tags
You may want to not put all of the desktop and mobile css all in the same page but make links to different sheets. That way you save on initial load time and won't waste time loading both of them. Like this:
<link rel='stylesheet' media='only screen and (min-width: 821px)' href='css/big.css' />
<link rel='stylesheet' media='only screen and (max-width: 820px)' href='css/little.css' />
It may be my ignorance, but I think any newbie question is welcome where there's an opportunity to distinguish between right and wrong.
For responsive and mobile-friendly design, I'm using
#media only screen and (max-width: 800px){}
from the very beginning with success. However when I uploaded the site to the server and browsed the site from mobile devices, it's not working. Then I learned to use
#media only screen and (max-device-width: 800px){}
Now it's working fine (Note: the -device in the middle).
But with -device in place I can't see the preview when developing the site in my desktop PC. So when I'm developing, I'm using without -device, and after upload I'm using the -device in the middle. It's a bit odd to me.
Recently I faced an interview board, where I submitted one of my mobile-devices friendly site for review, but when they resized the browser, it's not working because on the live site I used -device in the media query. So, it's a bit odd for me.
Is there a way I can code so that the code both works in Desktop with its media queries and also in mobile devices. I tried
#media only screen and (max-width: 800px) and (max-device-width: 800px) {}
But FAILED in my Desktop. :(
Is there a way?
EDIT
To acknowledge that, I'm in the right way, I'm using
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
in my <head></head> tag. And using Respond.min.js also.
#media screen and (min-width: 321px) and (max-width:960px){
xxxx
}
#media screen and (min-width: 720px) and (max-width:1024px){
xxxxx
}
JSFiddle
max-device-width is the width of the rendering area of the device,
max-width is the width of the target display area
max-width is the proper way to go with. Did you place de viewport meta tag in your HTML page?
<meta name="viewport" content="width=device-width, initial-scale=1>
I've done a lot of reading off of stackoverflow and various sites off of google, but I haven't been able to find a solution for this yet. :(
I have in my header:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1" />
...
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mobile-style.css" />
(I originally only had the first two in my meta viewport content (width=device-width, initial-scale=1.0), but added the second two after reading through some articles.)
In my mobile-style.css file, I have:
#media only screen and (max-device-width: 568px;) {
...
}
I have experimented with the max-device-width here as well, it has been 320, 480, 600, and 680... none of them work.
I can view this mobile stylesheet on my xperia Z using the dolphin browser (but not the Chrome browser), and on my friend's iPhone 3GS. Elsewhere it doesn't show up. The goal is just a simple mobile layout for the current site for any smaller-sized screen device.
Let me know if I should be providing more information.
Thanks! :)
EDIT
Here is the gist for my mobile-style.css file: https://gist.github.com/melissanoelle/7043032
Sorry for the delay, I've been away from a computer while traveling for my grandfather's funeral. :(
try this:
#media screen and (max-width : 480px) { /* change to your breakpoint */
...
}
Do you find any difference once you change your media query from:
#media only screen and (max-device-width: 568px;) {
...
}
To
#media all and (max-device-width: 568px) {
...
}
Are you sure you want to use max-device-width and not the max-width (targeted display area)?
Change your viewport to this:
<meta content="width=device-width, initial-scale=1" name="viewport">
Do you still have issues?
Turns out I needed to change my css query to this:
#media screen and (max-width: 568px), screen and (max-device-width: 568px) {
...
}
I got rid of the semi-colons and created a query for both max-width and max-device-width.