Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Now-a-days tablets with 1024x768 are rare. Is it still okay to write media query for 1024x768? do those retina tablets upscale the rendered website in order take advantage of the media queries. twitter bootstrap still goes the old way. what is the real meaning in doing so?
By default, high resolution tablets/phones will assume around 1024px (it will vary; in my tests a retina iPad defaults to 980px on a page with no body content). Mobile browser zoom the page layout in and out (this is different from user interaction) as necessary. You do not need to create special media queries for 2048 x 1536 retina resolutions. HTML pages can tell mobile browser how to handle layout with the meta viewport tag. See https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Mention the minimum dpi there to specify specific css for those high resolution displays
#media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 1024px) {
/* Retina-specific stuff here */
}
// "Retina" being "2x":
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
Its been a while since the difference between PCs and Smartphones screens resolution becomes quite close. So i think distinguishing between the 2 using
#media max-width isn't quiet precise.
Am i wrong or is there any other way to do it better?
Edit:
After i asked the question, I got an idea, i thought using the centimeters(cm) unit instead of pixels is the easiest way to distinguish between a small and big screens. but unfortunately the metric system isn't well supported it seems, it works flawlessly with my PC, but my mobile phone think that his width is more than 10cm even 20cm long.
I'm currently using #media orientation to distinguish between PC and Tablet&Mobile. my main concern is the mobile as it's width is so small on portrait orientation for wasting space on page margins, so this is enough for me now.
Remember you can use multiple tests in one query as well as AND/NOT/OR functionality in media queries
#media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px) {}
I've found testing for pixel-ratio > 1 and/or resolution (dpi) combined with device width useful in catching a lot of mobile devices.
It seems there is no best practice currently and it is recommended to use multiple tricks to detect whether or not the user is using a mobile browser.
Heres a similar question with recommended tricks
Detect if a browser in a mobile device (iOS/Android phone/tablet) is used
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I'm making a site and I'm making it responsive, i would like to know if it's better to use breakpoints at real devices size as in this image or setting breakpoints on each "breakpoint" in which the design doesn't work.
breakpoints at real screen sizes are unpractical as its nearly impossible to cover all sizes/ devices.. also you have to keep in mind that the browser size is not necessarily the actual screen size.. i would just set the breakpoints to make the design work.
You could have 4 to 5 breakpoints. The ones that I usually use and work well are for:
Extra small devices(Phones) (<768px)
Small devices(Tablets) (≥768px)
Medium devices(Desktops) (≥992px)
Large devices(Desktops) (≥1200px)
Since real device sizes vary, it's nearly impossible to cover all devices.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm only just now learning anything about CSS through my ASP.net class and I'm wondering if there is a standard for making web sites fit all resolutions.
My textbook simply states "This way, the site fits nicely on screens with a size of 1024 x 768 pixels, a common screen size for many of today’s computers, without being squeezed between the Windows borders. Systems with bigger screens
simply center the site in the available space." -Beginning ASP.NET 4.5 in C# and VB by Imar Spaanjaars
Though I feel this works, I also feel like it's not the standard practice when using CSS.
Any information would be great, as I'm very new to CSS, ASP.Net, and HTML in general.
There are such things as standard page sizes, such as 800x600, 1024x768, and 1280x1024, and different camps have their opinions; but more recent design theories are focusing on responsive design because of the myriad different sizes of screens.
You should design with a few sizes in mind but then make sure the designs look good on as many devices as possible. If you don't have dozens of different screen sizes to work with, the services like the link below can help you check your site using different virtual screen sizes:
http://quirktools.com/screenfly/
For general use case, you can use percentage to adapt your content to the screen size. For example,
<style>
div {
width: 80%;
margin: 80px auto;
padding: 25px;
background-color: #ccc;
}
</style>
<div>Hi!</div>
will display a div which will adapt itself depending of the size of the screen (try resize your window) because of the width: 80%;.
If you want to change CSS rules depending of the size of the screen (technic called "responsive design") then you should use the #media query keywords. See MDN
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
I am new to responsive web designing and CSS3 media queries. I am designing a website that will be accessed through browser on all kind of devices like cell phones, tabs, desktop.
I am using CSS3 media queries and in the process of creating css for my website. I want the font-size, the width of the div should vary as per device's screen width
How many screen sizes should be handled typically if I want my website to look fine on all type of devices. Is there a standard for it?
Please advise.
While you resize your browser window, it should simply look good on every possible size (resize your browser window and make sure you drag it through all the sizes for yourself: smallest to largest for your monitor.)
Then test this as well for different browsers.
You can find a handy tool for this on www.quirktools.com/screenfly.
But remember it's a tool. It should look good on all sizes. No matter how you drag it.
Well, there are a lot of free responsive templates on the web that already do that, but if you want to build your own design from scratch, you should start with a full version of your site for desktop browsers, then add css styles for most common devices/sizes.
Keep in mind that there are a lot of different resolutions a tablet or smartphone could have. 1080p, 720p, 800x600 etc. and a lot in-between.
Just do a quick search for a reference of responsive design device resolution.
This question already has answers here:
CSS media queries for screen sizes
(3 answers)
Closed 8 years ago.
I want to test a website on a plasma screen. This screen is 55 inches wide, but has a resolution of 1024x768. So for testing purposes, I changed my laptop's resolution from 1600x936 to 1024x768, and the site that was being tested displayed the same results.
I want to be able to target this 1024x768 screen resolution (not the device width or max, or min-width) via media queries.
Can someone please help me with this? Again, my laptop is 17 inches widescreen, and the default display is 1600x960. I want to test a website for responsive design for 1024x768 resolution. Need an appropriate media query for that.
I think this might be what you want: http://www.broken-links.com/2012/07/13/using-media-queries-to-test-device-resolution/
Edit:
I don't believe this is a duplicate, as it deals with the need to target the resolution and specifically NOT the device size.
Anyhow, click on the link above for a full analysis of this problem, but basically, I'll paraphrase here.
You can use the devicePixelRatio property to find out the DPR of your current device; unfortunately it’s not supported in Firefox for some reason, but it’s in all other major browsers:
console.log(window.devicePixelRatio);
Once you have your DPR (I’m going to use 1.5 as an arbitrary number throughout this article) you can start using it in your media query logic.
#media (-webkit-min-device-pixel-ratio: 1.5) {}
All of this being the case, the minimum number of media features you need to test for device resolution across the major browsers is two:
#media (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5) {}