I have a video background and since it takes quite a lot of MB to load that, I want to disable the video on smartphones.
The CSS itself is easy:
video{
display:none;
}
But, how to get the media query so that it won't affect desktop and laptop screens? Because smartphones are getting higher and higher resolutions and the old method of just targeting a smaller amount of pixels (±450px e.g.) won't work with newer smartphones anymore.
The width and height of the smartphone shouldn't matter, I fixed that in my 'regular' media queries, so that the css changes when my design breaks.
Use something like
#media (max-width: 480px) {
video {
display: none;
}
}
This will display nothing for screen sizes with a maximum of 480 pixels (majority of smartphones)
Related
I have written some HTML and CSS for a website, and some media queries to reformat the code when the screen shrinks. This works on browsers, when I shrink the browser window size, but isn't working on mobile devices. Can anyone think of why? See the Media CSS below:
#media screen and (max-width:500px) {
#education-table td {
display: block;
text-align: center;
}
}
Thanks in advance!
I have looked at similar issues and thus added the "screen and", but this has not fixed the issue.
Update: I am testing the code on a pixel 7. When resizing the browser to the same width as my phone it works perfectly. I have ensured my phone width is indeed below 500px. TO clarify, this code works when used on a browser where I have both emulated a pixel 5 (through dev tools on edge) as well as just resizing the browser window. However, when I load the same site on my pixel 7 (and a pixel 6a, + Samsung galaxy a30) this CSS does not kick in, and it loads the standard "desktop" CSS styling - so the columns of tables do not collapse and are impossible to read
This code is valid CSS and works like intended. It just applies to devices with screens smaller than 500px. I would recommend you to set the size to something higher like 768px.
The screen and just ensures that the style is only applied to normal screens and not the print-view or anything else.
As others mentioned, your code is correct and should work on mobiles, it just depends on their screen size.
If you want to reformat your layout for mobiles in portrait orientation independently of their screen width, you might want to consider the following:
#media screen and (orientation: portrait) {
#education-table td {
display: block;
text-align: center;
}
}
Solved it!
I needed to add this line to the HTML document -->
It was not linking the device width before I added this meta tag. Thanks for the help from you all
For multiple years I've been using min-device-width or max-device-width to differentiate mobile from tablet. Mobile CSS moves the cascading navigation menu to the bottom of the page, and simplifies the styling for readability. Tablet CSS leaves the page styling alone, as the screen size is sufficient to not require simplification. I have only iOS devices to test with. It works, but both min-device-width and max-device-width are deprecated in CSS and I am trying to move to #media to continue serving different CSS to both devices.
Where I am falling down is finding a clean method of doing so. My hope was that I could use some query like hover: none or pointer: coarse to detect one platform vs. the other, but iPhone and iPad both show as no hover, coarse pointer. My second attempt was to couple these queries with screen width query, but that has been a mess. Apple documentation shows native portrait-mode screen widths for recent iOS devices to be 640 to 1125px width for iPhones, and 1536 to 2224px for iPads. However, querying width in JS on my phone comes up with numbers that seem to instead match the UIKit widths (320-414px). Using a CSS #media (max-width: 450px) should match a phone, but it doesn't - it seems that the CSS is reading the native resolution width but JS is reading the scaled width. To get an element to only show up on my own iPhone I need to set max-width to something like 999px, but if it's truly reporting native resolution this would fail on an iPhone Plus - my phone is on the lower end of the screen size.
This seems pretty ridiculous. Is there a better way to serve one set of CSS rules to a mobile and another to a tablet, without having to set 37 different potential screen shape entries or use deprecated elements? I really don't want to have to rewrite my CSS every time a new phone model is released, or resort to browser sniffing - the less scripting running on the backend just for basic page display the better.
Per request: My really simple test file:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Test</title>
<meta charset="utf-8" />
<script>
window.onload = function(){
var devpxratio = window.devicePixelRatio;
var devwidth = screen.width;
document.getElementById('ratio').innerHTML = devpxratio;
document.getElementById('wide').innerHTML = devwidth;
};
</script>
<style type="text/css">
.mobile, .tablet, .desktop, .touch, .hover, .fine, .phone {
display: none;
}
#media (hover: none) {
.mobile { /* show all mobile-specific content */
display: block;
}
}
#media (pointer: coarse) {
.touch { /* show touch-only content */
display: block;
}
}
#media (hover: hover) {
.hover { /* show hover-capable content */
display: block;
}
}
#media (pointer: fine) {
.fine { /* show fine pointer content */
display: block;
}
}
#media (hover: none) and (max-width: 375px) {
.phone { /* guessing at mobile vs tablet based on width */
display: block;
}
}
#media (hover: none) and (min-width: 1000px) {
.tablet { /* guessing at mobile vs tablet based on width */
display: block;
}
}
#media (hover: hover) and (pointer: fine) {
.desktop { /* show stuff that would be visible on desktop */
display: block;
}
}
</style>
</head>
<body>
<p>Device pixel ratio: <span id="ratio"></span></p>
<p>Device width: <span id="wide"></span></p>
<p class="mobile">No hover detected</p>
<p class="touch">Coarse pointer detected</p>
<p class="hover">Hover detected</p>
<p class="fine">Fine pointer detected</p>
<p class="phone">This is likely a phone</p>
<p class="tablet">This is likely a tablet</p>
<p class="desktop">This is likely a desktop</p>
</body>
</html>
Expected outcome on my iPhone is:
Device pixel ratio: 2
Device width: 375
No hover detected
Coarse pointer detected
This is likely a phone.
Actual output is:
Device pixel ratio: 2
Device width: 375
No hover detected
Coarse pointer detected
I can't get it to output "likely a phone" unless my specified max-width is 980px or higher. None of the results seem to make any logical sense. Javascript check for screen width tells me 375px, which matches expected screen width for my phone (second generation iPhone SE, which uses same screen as iPhone 8). Apple documentation states native resolution of an iPhone SE is 750px with a UIKit width of 375pt. I cannot find any math whatsoever to tell me why the numbers come out as they do. 375pt should be 500px, not 375; there's no logic to why the calculated screen size doesn't match the screen size used by CSS in the test page, and I cannot make heads or tails out of why any of the screen size numbers can relate to a CSS width of not more than 980px, unless the scaling factor is being reported incorrectly - it shows as 2, but scaling of 2.6 would result in a 375px screen equating to 980px. Again, especially with manufacturer specs, determining the screen size break points should not be this difficult...
Usual practice for responsive design is to address just several groups of devices defined by max. viewport width, so you don't need to fiddle with every possible screen size individually. As an example you can start with these:
https://www.w3schools.com/howto/howto_css_media_query_breakpoints.asp
Anyway CSS #media (max-width: 450px) should definitely match the phone of 320-414px screen size (since 320 < 450)... Could you please show us some code where it does not work for you?
My main smartphone is a Galaxy S8 Plus.
The media queries for this device are:
#media only screen and (min-width: 360px) and (orientation: portrait)
Let's start with the portrait orientation. This one, I'm understanding 100%, but here comes the problem.
This is the media query for landscape:
#media only screen and (min-width: 740px) and (orientation: landscape)
Everytime I code in this media query it applies to my desktop which has a 1920 * 1200 resolution. I know it's influenced by the min-width: 740px.
Now, my question is are:
How do I tackle this problem?
Can I create a single query that covers both portrait and landscape?
If so , what are the best practices for units in responsive web design? Right now I'm using vh and vw in my project, but I think it creates a mess sometimes.
And one last question: how do I cover most devices out there with a minimal use of queries?
Good CSS is minimal. Test my approach:
Global styles on top. For example font colors, font weights, backgrounds etc.
Then, use media queries:
#media screen and (max-width:1200px){
}
#media screen and (max-width:992px){
}
#media screen and (max-width:640px){
}
and so on... Higher widths are on top. In "mobile-first" approach, use min-width, and then lower widths are on top.
Try to avoid orientation property. Use this property only when you really need it.
vw and vh are convenient but remember that they are not supported on older browsers.
Bootstrap is good framework but you should learn how to make logic CSS from the scratch first. Keep up the good work.
To deal with the problem that it applies to desktop change min to max, there is a "standard" for what the media queries should be seen here, your media query described the medium size of < 768px for horizontal and very small size of < 576px
You don't need to include the orientation, you can simply write #media only screen and (min-width: 740px) then you apply for both, but you should have two media queries to make sure you cover both
vh and vw work best for creating responsive design, however if you are coding for IE then it might a problem, and you will need to find an alternativ to calculating height
Use Boostrap, it does everything for you almost
When i read about responsive design, people always seam to use this statement:
#media screen and(max-width: )
But mobile phones today seem to have really great resolution (often more than pc), whats the best way to detect small devices?
Thx ;=)
The screen resolution does not matter. The value used in media queries is the device width. For example:
My phone has a screen with a resolution of 1280x720 pixels. When held upright (in portrait mode) the width is 720px, but since it is an HD screen, it has a 200% ratio, and the resulting device width is 360px. This is the value used in media queries:
/* Even though my phone has a screen width of 720px… */
#media screen and (max-width: 360px) {
/*
* This code will apply
*/
}
#media screen and (min-width: 361px) {
/*
* This code will not apply
*/
}
The general rule is that phones in portrait mode have a device width less or equal to 400px, regardless of how many actual pixels their screen contains.
You can't directly query physical size.
You can, however, perform a media-type query for DPI along with Height and Width.
Example
#media(resolution: 326dpi) and (device-width: 640) and (device-height: 1136) {
// Iphone 5s
}
This should be a good starting point: List of displays by pixel density
Physical pixels and CSS pixels are not the the same on retina/HD mobile displays.
Research the viewport meta tag for information on device-width. i.e. <meta name="viewport" content="width=device-width"> is the CSS pixel width scaled at 100%.
See Viewport Device-Widths for a list of common mobile screen sizes.
When you are doing responsive design, you don't actually "detect" the screen size, rather you "target" various size using CSS Media Queries.
If you are using a library like Modernizer for example, that's when you are actually doing detection for various properties.
I'm using a CSS Media Query to adjust the look of my page if it is very narrow. In my simplified example, if the page is less than 300px wide, I'll make the background blue.
#media all and (max-width: 300px) {
body{ background-color:blue;}
}
I recently discovered that if the user zooms (Ctrl+Scrollwheel or on Chrome Wrench>Zoom) that the max-width will still kick in at 300 actual pixels, not 300 zoomed pixels. This can break sites with more sophisticated layouts. Is there any way for the max-width media query to handle users with zoomed browsers?
I've experimented around and it seems that you can use media queries for a zoom, however in a Webkit browser you must define the viewport.