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
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">.
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">
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'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.