Browser not recognizing max-device-width
In your case you can use like this
@media only screen
and (min-device-width : 320px)
and (min-width : 320px) {
/* Styles */
}
and this is a slandered media queries code for all devices by Chris Coyier
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}
/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Does Chrome,Firefox,etc specify max-device-width to mobile?
For better view port size , their standard and uses take a look at bellow links
"sizes for various devices"
for other trends look here
and yes do remember to include
<meta name="viewport" content="width=device-width, initial-scale=1">
@media only screen and (max-device-width : 480px) didn't work
Try this out
@media only screen and (max-width : 480px){
.judul {
content: url(3.png) !important;
height: 50%;
position: absolute;
max-width:480px;
top: 0;
right: 0;
left: 0;
}
body {
background-image:url(Bg phone.png) !important;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-position: center;
}
}
Viewport width = device-width is not working
Ok at the end, I find out the problem was I didn't read the whole documentation for project clarity, their components already have that responsive parts that normally you would do with @media queries
, but turns out I have to add some properties to them to make them responsive.
In the end, I didn't have to add any @media queries
, and it wasn't a problem of the viewport
, I just added the property [clr-nav-level]="1"
to my header and that fixed it.
<div class="header-nav" [clr-nav-level]="1">
Here is the documentation in case you want to read it.
My @media queries aren't working on mobile devices
This is likely because you don't have a viewport set.
Place the following meta tag in the <head>
element of your document.
<meta name="viewport" content="width=device-width, initial-scale=1">
For more information, read "Using the viewport meta tag to control layout on mobile browsers " - (mdn)
Why is device-width not working on Chrome for Android?
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)
Should I use max-device-width or max-width?
TL;DR
If you're making a responsive website, use min-width
/max-width
in your media queries rather than min-device-width
/max-device-width
in order to target a wider range of screen sizes.
According to the 2018 Media Queries Level 4 specification draft, the device-width
media feature is deprecated. It will be kept for backward compatibility, but should be avoided.
8. Appendix A: Deprecated Media Features
To query for the size of the viewport (or the page box on page media), the
width
,height
andaspect-ratio
media features should be used, rather thandevice-width
,device-height
anddevice-aspect-ratio
, which refer to the physical size of the the device regardless of how much space is available for the document being laid out. Thedevice-*
media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.
As a side note, remember to specify a viewport meta tag in the <head>
section of your document:
<meta name="viewport" content="width=device-width, initial-scale=1">
Explanation
Due to all the different possible screen resolutions and pixel densities a given device can have, a pixel is not a pixel because there are several things to take into consideration (zoom, pixel density, screen resolution and size, device orientation, aspect ratio, etc..). In this case, a pixel is actually referred to as a "optical reference unit" rather than a physic hardware pixel.
Fortunately, you can specify a viewport meta tag in the <head>
section of your document in order to control the width and scaling of the browser's viewport. If this tag has a content
value of width=device-width
, the screen's width will match the device independent pixels and will ensure that all the different devices should scale and behave consistently.
<meta name="viewport" content="width=device-width, initial-scale=1">
In terms of media queries, you will probably want to use max-width
rather than max-device-width
, since max-width
will target the viewport (current browser window), whereas max-device-width
will target the device's actual full screen size/resolution.
In other words, if you are using max-device-width
, you will not see different media queries applied when resizing your desktop browser, because unlike max-width
, only the device's actual full screen size is taken into consideration; not the current size of the browser window.
This makes a huge difference if you're trying to create an adaptive layout because the site won't be responsive when resizing the browser. In addition, if you're using max-device-width
the media queries you're using to target devices with smaller screens will not apply to desktops even when resizing the browser window down to match said smaller screen size.
As of 2018, the latest media query specification draft has actually deprecated the device-width
media feature, therefore it should be avoided.
In addition, this article on Google Developers highly discourages the usage of max-device-width
:
Google Developers - Web Fundamentals - Responsive CSS media queries
It is also possible to create queries based on
*-device-width
; though this practice is strongly discouraged.The difference is subtle but very important:
min-width
is based on the size of the browser window, whereasmin-device-width
is based on the size of the screen. Unfortunately some browsers, including the legacy Android browser may not report the device width properly and instead report the screen size in device pixels instead of the expected viewport width.In addition, using
*-device-width
can prevent content from adapting on desktops or other devices that allow windows to be resized because the query is based on the actual device size, not the size of the browser window.
Further Reading:
- Quirksmode.org - A pixel is not a pixel is not a pixel
- W3 - Media Queries Level 4 Specification
- Google Developers - Web Fundamentals - Viewport
- Google Developers - Web Fundamentals - Responsive CSS media queries
- MDN - Using the viewport meta tag to control layout on mobile browsers
Chrome Device Mode Emulation Media Queries Not Working
I fixed this problem by adding a meta tag to my page:
<meta name="viewport" content="width=device-width">
UPDATE (December 2019):
It looks like you may also need to set the initial scale and minimum scale, like so:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
Related Topics
Calculate Sum Opacity from Layers
How to Position Two Divs Horizontally Within Another Div
CSS Filter Invert Rule Breaking Fixed Position on Chrome 68
How to Use Calibri Font in Linux and Mac
Change Div Order on Responsive Design
Less - Nesting Generates Bad CSS Code
Center Image Vertically and Horizontally Inside of Div with Float:Left
HTML5 Video Background Color Not Matching Background Color of Website - in Some Browsers, Sometimes
Bootstrap Styles Missing After Deploy to Heroku
Overflow-X: Hidden Also Hides Vertical Content Too
Onmouseout Event Not Triggered When Moving Mouse Fast (Gwt - All Browsers)
CSS Media Queries and Size of Images
When to Use Rel="Preload"? Why Is Preloading Fonts/Fontawesome a Good Idea
Rails 4.1 and Bootstrap 3 Glyphicons Are Not Working
Divs Appearing Different on Different Browsers
Creating Triangles Using Borders
Force Div Element to Stay in Same Place, When Page Is Scrolled