I have a website that I developed, but I just got a screenshot from someone who was looking at it on a 2560 x 1600 monitor and it looks kind of ridiculous. What is a reasonable upper limit for screen resolutions to support? I'm concerned about negatively impacting load time by adding a huge image. How can I deal with this properly?
Solution 1: Maximum width
Use a container div with the following CSS:
#innerbody {
width: 100%;
max-width: 2000px;
margin: 0 auto;
}
Put all HTML in this container (wrap the container around all HTML), like this:
<body>
<div id="innerbody">
... your page ...
</div>
</body>
I would also add a nice subtle background color to the body, to mark where the 'page' ends, like this:
body {background: #eee;}
#innerbody {background: #fff;}
Solution 2: Mask the quality
If you are only worried about the (poor) image quality, you can add the container div (from solution 1) and use this CSS to overlay a hatch (diagonal lines). This is trick is often used for low quality full-screen video, but also works for background images.
#innerbody {
width: 100%;
background: url(/hatch.png);
}
Solution 3: Media queries
Got a big screen? Thou shall get a big image. Got a small screen? Thou shall get a small image. Sounds logical, right? You can achieve this by using media queries. This works like this:
#media screen and (max-width: 500px) {
body {
background: url(small_image.jpg);
}
}
#media screen and (max-width: 1000px) and (min-width: 501px) {
body {
background: url(medium_image.jpg);
}
}
#media screen and (max-width: 2000px) and (min-width: 1001px) {
body {
background: url(big_image.jpg);
}
}
#media screen and (min-width: 2001px) {
body {
background: url(really_big_image.jpg);
}
}
For each screen size ONE of these media queries will be true. That image wil be served.
To address your load time concern, one option is to use media queries so you can control the background image based on visitor viewport size. e.g.
#media (max-width: 800px) {
.div-with-background{
background-image: url("background-sm.jpg");
}
}
#media (max-width: 1200px) {
.div-with-background{
background-image: url("background-md.jpg");
}
}
#media (min-width: 1201px){
.div-with-background{
background-image: url("background-lg.jpg");
}
}
What is a reasonable upper limit for screen resolutions to support?
It depends on your visitors. If you use Google Analytics, you can get details on this by going to Users > Technology > Browser & OS and under 'Secondary Dimension' search for 'Screen Resolution'
Hope this helps!
ISSUE SUMMARY:
Hi,
I just purchased Jomsocial + Template Socialize. I use RSForm for my landing page.
I have an image on left and the form on the right side on desktop view.
When I reduce browser to simulate Responsive view, the text come under image but has a width of 50%. This is the width necessary for destopview.
So I add some lines in /templates/socialize/css/template.css
#media (max-width: 480px) {
.div_image_homepage_right {
width: 100% !important;
}
}
BUT it doesn't work. width stay 50% instead of 100%. I tried with Chrome & Firefox.
Please see screenshot for better understanding.
Someone has an idea how to fix that?
Try this
#media only screen and (max-width : 480px) {
.div_image_homepage_right {
width: 100% !important;
}
}
I think the underlying issue is using max-device-width vs plain old max-width. Using the "device" keyword targets physical dimension of the screen, not the width of the browser window.
For example:
#media only screen and (max-device-width: 480px) {
/* STYLES HERE for DEVICES with physical max-screen width of 480px */
}
Versus
#media only screen and (max-width: 480px) {
/* STYLES HERE for BROWSER WINDOWS with a max-width of 480px. This will work on desktops when the window is narrowed. */
}
My website http://asebratenpark.no got a Home-page (main index-file) with fullscreen photos. I really like how it look on desktops. But really dislike how it looks on smartphones.
I am thinking of using queries to remove the fullscreen rules from firing on smartphones.
Is that an idea? If it is, I am a bit uncertain of how I should proceed.
Some possible solutions:
1) Use Media Queries in CSS to load a smaller image (you should be doing this anyway) so that something like:
#media only screen
and (max-width: 640px)
{
.background {
background-image:url('ultrasmall.jpg');
}
}
#media only screen
and (min-width : 641px) and (max-width: 800px)
{
.background {
background-image:url('smaller.jpg');
}
}
etc. for other screen / window sizes .
2)
You can also use CSS3 image sizing rules to set the image to fit the size of the screen so using background-size: cover; or background-size: contain; to best suit your needs.
See http://www.w3schools.com/cssref/css3_pr_background-size.asp
#media only screen
and (max-width: 640px)
{
.background {
background-image:url('ultrasmall.jpg');
background-size:cover;
}
}
I'm doing some css code to a website that uses a full cover background and I want to serve it with media queries to a several devices with different resolutions.
I've already figured out how to do that with all the iPhones and iPads doing this:
#media only screen and (min-device-width:320px) and (max-device-width:480px) and (-webkit-min-device-pixel-ratio:1) { /* for the iPhone 2G/3G/3GS */ }
#media only screen and (min-device-width:640px) and (max-device-width:960px) and (-webkit-min-device-pixel-ratio:2) { /* for the iPhone 4/4S */ }
#media only screen and (min-device-width:560px) and (max-device-width:1136px) and (-webkit-min-device-pixel-ratio:2) { /* for the iPhone 5 */ }
#media only screen and (min-device-width:768px) and (max-device-width:1024px) and (-webkit-min-device-pixel-ratio:1) { /* for the iPad 1/2 and iPad mini */ }
#media only screen and (min-device-width:1536px) and (max-device-width:2048px) and (-webkit-min-device-pixel-ratio:2) { /* for the iPad 3/4 */ }
And for some desktop screens:
#media only screen and (min-device-width:1280px), only screen and (min-device-width:1366px), only screen and (min-device-width:1440px) { /* some regular desktop resolutions */ }
#media only screen and (min-device-width:1680px), only screen and (min-device-width:1920px) { /* some larger desktop resolutions, likely hd screens */ }
Since the purpose of all this media queries is to satisfy only a full cover background using this css rule in each #media (with different images, obviously, to reduce server load and display a friendly background considering the specs between devices)...
html {
background:url("image.jpg") no-repeat center center fixed;
-webkit-background-size:cover;
-moz-background-size:cover;
-o-background-size:cover;
background-size:cover;}
I have my doubts with doing this for retina screens (especially the Macbook Pro Retina, 13inch and 15inch models).
I guess that, using the same logic as above, this should be like this:
#media
only screen and (min-device-width:2560px) and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-width:2560px) and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-width:2560px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width:2560px) and (min-device-pixel-ratio: 2) { /* for the 13inch model */ }
#media
only screen and (min-device-width:2880px) and (min--moz-device-pixel-ratio: 2),
only screen and (min-device-width:2880px) and (-o-min-device-pixel-ratio: 2/1),
only screen and (min-device-width:2880px) and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-width:2880px) and (min-device-pixel-ratio: 2) { /* for the 15inch model */ }
So... I hope this works in this way.
Also, I would like you to give me some advice on improving this. The main idea is that for each display resolution and device, a different image is served, to avoid overloading both the server and the client side (in this case, the browser).
This is old, but maybe these links help?
CSS Tricks retina display media query
Coder Wall - HD & Retina Display Media Queries
#media only screen and (max-device-width : 640px) {
/* Styles */
}
#media only screen and (max-device-width: 768px) {
/* Styles */
}
This is what I have so far. The PSD mockup for the mobile site I'm working on, is 640px wide. The other one, the tablet version of the site, is 768px. I was able to test the site in my web browser by only using max-width, but now it's time to get this site working on the devices, and it's still rendering the regular full size web page. The two queries above are my best guess. Where am I going wrong?
This can be done with Level 4 Media Queries: (Browser Support is quite good - CaniUse)
Interaction Media Features
The idea here is to target devices based on their capabilities. (as apposed to say, checking the size or resolution of the device which tend to be moving targets)
The pointer media feature queries the quality of the pointer mechanism used by the device.
The hover media feature queries the user’s ability to hover over elements on the page with a given device.
So to answer the question...
Mobile devices/tables are similar in that:
1) The accuracy of the primary input mechanism of the device is limited.
This means we could use the following media query:
#media (pointer:coarse) {
/* custom css for "touch targets" */
}
div {
width: 400px;
height: 200px;
color: white;
padding: 15px;
font-size: 20px;
font-family: Verdana;
line-height: 1.3;
background: green;
}
#media (pointer:coarse) {
div {
background: red;
}
}
<h2>The pointer media feature queries the quality of the pointer mechanism used by the device.</h2>
<div>The background here will be green on 'desktop' (devices with an accurate pointing mechanism such as a mouse) and red on 'mobile' (devices with limited accuracy of primary input mechanism) </div>
Codepen Demo
2) The primary pointing system can’t hover
So our media query would look like this:
#media (hover: none) {
/* custom css for devices where the primary input mechanism cannot hover
at all or cannot conveniently hover
}
NB: Chrome/Android prior to version 59 required the on-demand value for hover/any-hover media queries. This value was later removed from the spec and no longer required by Chrome from version 59.
So to support older versions of Android you need
#media (hover:none), (hover:on-demand) {
/* custom css for "touch targets" */
}
div {
width: 400px;
height: 150px;
color: white;
padding: 15px;
font-size: 20px;
font-family: Verdana;
line-height: 1.3;
background: green;
}
#media (hover:none), (hover:on-demand){
div {
background: red;
}
}
<h2>The hover media feature queries the user’s ability to hover over elements on the page</h2>
<div>The background here will be green on 'desktop' (devices which support hover) and red on 'mobile' (devices which don't [easily] support hover ) </div>
Codepen Demo
NB:
Even if you were to connect a mouse to a mobile/tablet, the hover media feature still matches none since their primary interaction mode doesn't support hover.
If we do want to take secondary devices into consideration we could use the any-pointer and any-hover features
So if we wanted mobile devices connected with a pointing device to be treated like a 'desktop' we could use the following:
#media (any-hover: hover) { ... }
Extra reading
Interaction Media Features and their potential (for incorrect
assumptions)
https://css-tricks.com/touch-devices-not-judged-size/
Edit Note: This is specifically a method that worked with older browsers. The accepted answer has been updated to a more modern CSS that does have media queries that makes this easy. I mainly suggest using my older code for CSS specific to older browsers.
Instead of using specific widths initially, or messing around with orientations, or any other nonsense, I suggest using the following media tag...
#media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
/* Your touch-specific css goes here */
}
#media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
/* Your click-specific css goes here */
}
And what do you use these tags for? To set stuff for hover & click vs touch events.
Touch devices, other than a few devices in grey areas above addressed, have a very different resolution than desktop devices. Do -not- this to set design elements, but navigation elements. Some pudents may cry that some insanity with max-width may be better, but there's so many HD phones it's ridiculous that device-max-width quickly becomes useless.
However, you should use width media width queries. However, don't bother with max-device-width, just max-width & min-width. Let the above tags address your touch vs not touch users, let min-width vs max-width address based on window size and adjust site visuals.
Further, using orientation to determine if it's mobile or not is just silly, as even monitors can be placed in various orientations (a common setup I've seen for 3-monitors is a portrait center monitor and landscape side monitors.)
For width views, focus on making your site clean on various widths, ignoring what kind of device is actually accessing it, just make sure your screen displays cleanly at various sizes. That's good design that applies to both desktop and mobile. If they have your site in a small window at the upper left corner of their screen for reference (or quick distraction) while using the majority of their screen real estate elsewhere, and it should be for them, as well as mobile users, that your smaller widths are built for. Trying anything else is quickly going down a very painful and self-defeating path for web development. So for those smaller widths, you can set your widths to whatever you want, but I'll include a few I personally like.
So altogether, you should have something like this...
#media only screen and (min-resolution: 117dpi) and (max-resolution: 119dpi), only screen and (min-resolution: 131dpi) and (max-resolution: 133dpi), only screen and (min-resolution: 145dpi) and (max-resolution: 154dpi), only screen and (min-resolution: 162dpi) and (max-resolution: 164dpi), only screen and (min-resolution: 169dpi) {
#touch_logo {
display: inherit;
}
#mouse_logo {
display: none;
}
/* Your touch-specific css goes here */
}
#media only screen and (min-resolution: 165dpi) and (max-resolution: 168dpi), only screen and (min-resolution: 155dpi) and (max-resolution: 160dpi), only screen and (min-resolution: 134dpi) and (max-resolution: 144dpi), only screen and (min-resolution: 120dpi) and (max-resolution: 130dpi), only screen and (max-resolution: 116dpi) {
#touch_logo {
display: none;
}
#mouse_logo {
display: inherit;
}
/* Your click-specific css goes here */
}
#media (min-width: 541px){
/* Big view stuff goes here. */
}
#media (max-width: 540px) and (min-width: 400px){
/* Smaller view stuff goes here. */
}
#media (max-width: 399px){
/* Stuff for really small views goes here. */
}
Although, don't forget to include the following in your page's head:
<meta name='viewport' content="width=device-width, initial-scale=1" />
It may still break on some cases, but this should be more concise and more complete than many other solutions.
You have your main desktop styles in the body of the CSS file (1024px and above) and then for specific screen sizes:
#media all and (min-width:960px) and (max-width: 1024px) {
/* put your css styles in here */
}
#media all and (min-width:801px) and (max-width: 959px) {
/* put your css styles in here */
}
#media all and (min-width:769px) and (max-width: 800px) {
/* put your css styles in here */
}
#media all and (min-width:569px) and (max-width: 768px) {
/* put your css styles in here */
}
#media all and (min-width:481px) and (max-width: 568px) {
/* put your css styles in here */
}
#media all and (min-width:321px) and (max-width: 480px) {
/* put your css styles in here */
}
#media all and (min-width:0px) and (max-width: 320px) {
/* put your css styles in here */
}
This will cover pretty much all devices being used - I would concentrate on getting the styling correct for the sizes at the end of the range (ie 320, 480, 568, 768, 800, 1024) as for all the others they will just be responsive to the size available.
Also, don't use px anywhere - use em's or %