If I set my screen resolution to 1024 * 768, does that mean my website can be 1024 pixels wide?
If so then why does an image 1024 pixels wide cut off the page?
http://stevenportfolio.servehttp.com
If your screen resolution is 1024x768, that means that your screen is 1024 pixels wide. The available space for a web page is probably a little less, since scroll bars and window borders take up some space.
The short answer is no. A screen resolution of 1024 x 768 means that your screen is displaying 1024 pixels horizontally and 768 pixels vertically. When you view your web page, though, you aren't always using 100% of those pixels. For example, the scroll bar in your browser takes up some of those pixels or if the browser is not maximized then you may only have half of the screen.
You should never design a website that relies on the screen being a particular resolution for several reasons:
Not all your users have the same screen resolution
Even if you try to find the resolution with JavaScript or some similar hack, it may or may not be reported correctly (plus your website shouldn't require JavaScript to work)
The browser window may or may not be maximized
Try to come up with a design that is flexible enough to scale for any standard screen size and remember to test your site frequently on different screen sizes, browsers, operating systems, and resolutions. (You can use browsershots.org if you don't have multiple computers handy.)
Related
This question relates to web development.
I'm going to start by apologizing for the horrible title but I wasn't sure how to title this. CSS pixels and how they interact with screen resolutions confuse me a bit already, when you add "intermediate pixel layers" and image drawing it's even more nebulous. So here's my actual question:
Let's say that we have an image set to display as 2x1 (css pixels) on a web page. And we instead feed it a 4x1 image (rasterized). The browser will fit this image to the 2x1 css pixels we specified earlier. But, would we technically be able to see all 4x1 pixels on a setup where 1 CSS pixels = 2 device pixels? Or would it instead resize the 4x1 image to 2x1 then display each pixel twice? And does this change on a per browser/device basis?
Bonus points: How does this play into accessibility tools that zoom into web content for the visually impaired? (if at all).
Answering my own question. The short answer is YES browsers will show different amounts of detail based on screen resolution.
CSS pixels ARE NOT screen pixels. If an image is 600x600 pixels and you decide to display it in a CSS-defined area of 300x300 (img:{width:300px;height:300px}), it could display as 300x300 screen pixels or it could display as 600x600 screen pixels. Which of the two it is will depend on the end user's OS screen resolution.
Example:
I created a 4x1 pixel png image:
I added this image to an html page and sized it with a img:{width:2px; height:1px;}. For good measure, I also added a blue div with div:{width:2px; height:1px;} bellow it.
I then set the "css resolution" of the page to half that of my OS screen resolution (If the OS was set to 2000x2000 I made sure that the full html page had a css widthxheight of 1000x1000px). So each css pixel would contain 4 screen pixels.
This is how it displayed:
Both the image and the blue div are 2px wide (that's css pixels) but they display as 4 screen pixels. In the case of the blue div, it duplicates the pixels to fit the screen resolution. But in the case of the image, it displays all 4 individual pixels. In both cases, it duplicates the pixels vertically to fit the screen resolution (technically it's probably more of a stretch than a duplication, but you get the idea).
I'm not entirely sure about this but I'm assuming at this stage that all browsers act in a similar fashion.
I'm a bit confused about CSS pixels and whether they translate into pure resolution or physical width of devices.
My question is, will content displayed on a 1080p 13 inch laptop be the same as content on a 4k 13 inch laptop? Or will everything be scaled down?
(I'm using (max-width)/(min-width) media queries and not (max-device-width)/(min-device-width)
I'd be glad if you guys could clear this up for me.
Yes, it should render the same.
CSS uses “px” to relate “...the pixel unit to the reference pixel...”, thus a single CSS “px” could represent more than one physical pixel as different devices (ie. HD vs. 4K) have different pixel densities.
A single “px” in CSS should always be about 1/96 of an inch though. You may see variations in rendering based on browser rendering and/or monitor resolution quirks.
For most cases, desktop and laptop displays will use the same pixels their resolution is set to for CSS pixels. In these cases, a 4k 13" laptop without scaling will display more content, at a smaller physical size, than a 1080p 13" laptop.
That said, there are some cases where this isn't quite true. With mobile devices the browser will use a scaled down resolution so that elements are rendered at a more natural physical size. This scaling can be determined by the devicePixelRatio - which is the ratio of physical pixels to CSS pixels.
Further reading about devicePixelRatio: https://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
Details on sizes for mobile devices: https://mydevice.io/devices/
I have a web page with a row 1200px wide with some 3/4 columns, each one holding an image, that is each image may be 300/400 px wide. On collapse, below the breakpoint (768), images appear blurred because they are scaled to 768px in width.
I wanted to keep things as small as possible, however I think I'll have to use larger images, shrinking them with media queries on large desktop view and 1:1 (almost) on tablets.
Any thought?
You can upload the images to 768px if that is the biggest they get. If you have a lot of images and worry about download time for slow connections or bandwidth from server, consider only load images depending on resolution.
You can read more here:
http://www.html5rocks.com/en/tutorials/responsive/picture-element/
You can also google responsive images and see what would fit you best, or build your own solution if you are into that :)
I recently started to step in responsive design. I used http://responsivepx.com/ to test how my design will look on every screen resolution. I have a mobile phone (galaxy prime core) which according to that site it's 480X800 screen resolution. The thing is, I tried to set a breakpoint on (min-width=480) px but my phone didn't respond to that breakpoint. After further testing, the phone responded to the breakpoint when I set (min-width=320px) it didn't respond when I set it (min-width:321px) so I figured my phone's actual width was 320 in pixels ...
my question is : what does that mean and is there a way to calculate it or is it just width - 160 ?
Device width (value your browser sees and you use in media queries) is not "width - 160", it is "physical width / device pixel density". Your phone's is 150%, so it is 480 / 1.5 = 320.
For nice overview of common screen resolutions of mobile phones I'd suggest http://screensiz.es/phone.
I think you can find a list of the most commom devices on the internet. I don't think you can do it for ALL the mobiles (there are thousands) but a lot of resolutions are the same. here is a website with some info (in spanish): https://norfipc.com/celulares/medidas-pantalla-resolucion-telefonos-celulares-tabletas.html
and here is a picture with others: http://www.destacaimagen.com/wp-content/uploads/responsive-web-design-chart1.jpg
Is there any way to get the window aspect ratio in a css media query? I have found the device-aspect-ratio, and device-pixel-ratio, but it seems that it is all possible to get several breakpoints based on pixel size and number of pixels and also device width. Is it not simpler to make website relative to the browser window because the browser window spans over the whole device on mobile phones (for now) but on PC you can resize your window to your wishes?
So is there any workaround or do I need to do some server/client side programming?
Thank you enigma. English is not my first language.