is it possible to write a single max-width query which can be compatible for all the mobile and tab devices? Since I am new to css, a help would be appreciated.
#media screen and (max-width: 768px)
You will also need <meta name="viewport" content="width=device-width, initial-scale=1.0">
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">.
As from the title, I don't understand why the media query works on emulator device on Google Chrome and it doesn't work on a real mobile device.
Html meta tag
<meta name="viewport" content="width=max-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Css:
#media screen and (min-device-width:640px) and (max-device-width:767px){...}
Actually I've set up the min and max resolutions from 640/768/850/1024 for mobile devices screen resolution, but it seems be an error, cause .... I don't understand yet
You should apply device width in meta viewport
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
The CSS should be like the following and check:
#media screen and (min-width:640px) and (max-width:767px){...}
I am making a non-native iOS application in Xcode using cordova(phonegap) and the angularJS framework
I am differentiating between css properties in different orientations by using:
#media all and (orientation:portrait) { }
and
#media all and (orientation:landscape) { }
In Xcode simulator in portrait mode, when a text field is clicked on, the onscreen keyboard pops up. When this happens, it switches to the css of the landscape mode while still keeping portrait orientation. This obviously messes up all formatting.
Would appreciate any suggestions to why this might be happening.
Thanks in advance.
To fix this issue try changing your orientation checks to aspect ratio :
Replace
#media screen and (orientation : landscape)
with
#media screen and (min-aspect-ratio: 13/9)
Replace
#media screen and (orientation : portrait)
with
#media screen and (max-aspect-ratio: 13/9)
Source : https://www.robinosborne.co.uk/2014/09/12/android-browsers-keyboards-and-media-queries/
I had a similar issue with portrait/landscape mode in iOS 7 and this fixed it:
Check your html meta tags for something like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
Replace it with this:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
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!