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">.
Related
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>
How does #media only screen and (min-width: 1200px) differ from meta name="viewport" content="width=device-width"
I tried to place them both but nothing changes.
#Media only screen support IE9-10 and windows phones-, where as meta name="viewport" content="width=device-width" only support browsers like Chrome, Safari, Fire-F and Opera
Viewport :You're setting your mobile browser's viewport's width to be equal to your device width.For all the devices and desktops
Media Queries:A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Separate mediaqueries for each resolutions of the devices
I have a responsive WP theme based on a Bootstrap ver2 css framework. Everything works on desktop: if test in different size (for different media queries) no problem. But if I'm testing on phone doesn't loads the media query. What could be the problem.
Link to the site: http://moldovan.szanto-zoltan.com/
p.s.: the header contains this to fit the device width
<meta name="viewport" content="width=device-width, initial-scale=1">
Via the documentation of Bootstrap 2
Bootstrap doesn't include responsive features by default at this time
as not everything needs to be responsive. Instead of encouraging
developers to remove this feature, we figure it best to enable it as
needed.
How to enabling responsive features
Turn on responsive CSS in your project by including the proper meta
tag and additional stylesheet within the <head> of your document. If
you've compiled Bootstrap from the Customize page, you need only
include the meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/bootstrap-responsive.css" rel="stylesheet">
If you don't compiled Bootstrap from the Customize page, here is how to do it
Use the compiled responsive version, bootstrap-responsive.css
Add #import "responsive.less" and recompile Bootstrap
Modify and recompile responsive.less as a separate file
.
/* Large desktop */
#media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
#media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */
#media (max-width: 767px) { ... }
/* Landscape phones and down */
#media (max-width: 480px) { ... }
for more information, read the documentation. I hope this solution will help you.
Suggestion
I think the best solution is to use bootstrap 3 it will work fine
Add those meta in your header page to tell the browser to disable the scaling. Then the CSS #media selectors are working as expected :
<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
<meta name="viewport" content="width=device-width">
suggestion from this question
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!
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.