I have a div and I'm trying to figure out how to get it to occupy the same amount of screen space regardless of device display density.
For example, let's say I have two devices that are each 5 inches wide. The first display has a device-pixel-ratio=1, and the second has a device-pixel-ratio=2.
Device 1: 5 inches wide, device-pixel-ratio=1
Device 2: 5 inches wide, device-pixel-ratio=2
So the second device has twice as many pixels packed into the same space.
My div style:
.myDivStyle {
width: 100px;
height: 50px;
}
If I understand correctly, Device 2 would appear to render the div at half the width/height as on Device 1.
If that's the case, is there a way to define our width/height in a device-independent unit? Or do we have to scale all our styles manually on page load etc after we examine the device-pixel-ratio attribute?
Thank you
Redefining your css size by using em unit would be good.
Some good links in this reference. Please check these
w3.org
w3.org
css-tricks
All the above links urge that, em is best suitable in cases when you want your document to behave well on wide range of devices.
This sounds more like you need to work with percentages instead of pixels. So it will use a "percentage" amount of your screen
.myDivStyle {
width: 50%;
height: 25%;
}
It would solve the problem with the ammount of pixels. This would solve the issue if your working with the screen of an Iphone and an Android, since they use two completely different resolutions. For instance, i believe the Iphone uses 320 by .. something, while my own Samsung Galaxy uses i think 480 by something. (dunno the true values)
Most of the devices would come under the following 3 resolutions
1) HVGA-Half of VGA (320 x 240)
2) WVGA- wide VGA(800x 480) - nearly 1.5 times of HVGA
3) HVGA 2x- (640 X 960) - IPHONE 4 uses this resolution
Write seperate css files for the above three resolutions by
#Media screen and (min-width: 320px) and (max-width: 480px){
/* css files here*/
}
or
#Media screen and (min-device-pixel-ratio: 2)
{/* css files here*/
}
Do the same with other resolutions. A css class created in 1 resolution should be copy pasted in all three resolutions to get a perfect view. By this way you can showcase a perfect device specific style
Related
I am building my project. I just noticed that I made a big mistake with using just pixel values in tables, sidebars etc. So it makes a problem, like if other person has different resolution in computer my website looks shapeless and bad.
Which codes I should use to apply responsive design?
As I know to use width, height values with % is useful. Also I don't know exactly how to use % values. What else I should do?
I use "rem" units to avoid problems (including the "media" max/min widths).
Consider 1rem = 16px for your desktop desing and 99.99% times everything goes well even in almost unknown devices.
https://www.w3.org/TR/css-values-3/#font-relative-lengths
EDIT: (cause the comment)
There are different things.
1.- Use "rem" to size things (like font-size: 0.875rem in spite of font-size:14px) to keep thing with adecuate proportions to the size of the pixels, 2.- Use #media queries to change layout when the screen is to wide/to narrow, that sizing can be done in rems to, so min-width 20rem means (more or less) the width of 20 "M" letters (not really true, but close).
Let say you have a 24 inchs screen with 1480px, and your friend have also 1480px, but in just 6 inchs. If you make font size 12 px you will see pretty nice, but probably your friend will find it small. The device/browser developers can define a different rem size, acording to the physical size of the device (24px, for example) and your 0.875 rem will be 21 pixels in his screen (not so small, more comfortable to see)
The change in layout to adapt to a narrow screen can be done using those rems also, so for the same 1480px he can have a more comfortable layout. You have a screen 1480/16=92,5 rems width, but he have 1480/20=74 rems width.
You can use percentage values just like you would use pixel values. If you want 1/4th of your website to be a sidebar, it can be as easy as:
.container {
width: 75%
}
.sidebar {
width: 25%
}
This wil make the container take up 75% of the browsers window. Since there is 25% space left, you could neatly fit a sidebar next to it by making that 25% width (you might need to add float:left to both elements).
However, I can image that on mobile view you would like your container and sidebar to be 100% width. You can do this by using media queries:
//medium phone size
#media screen (max-width: 425px) {
.container {
width: 100%
}
.sidebar {
width: 100%
}
}
There are several solutions:
Use media queries to your pages.
Use a CSS grid (and media queries)
Use Flexbox (and media queries)
Use an other css framework including a grid system
You can start with Bootstrap. That will not only make your site responsive but also there are many predefined designs for the HTML elements like buttons, fonts, tables etc. You will only have to use the classes.
If you are not well accustomed to Bootstrap the do as #Damian Makkink and #Marc_DNL have posted.
IMO a self-built CSS for a responsive site and design is better. Initially, in my hobby project, I started with Bootstrap but I have completely phased that out.
I was searching about how to make your webpage fits any screen resolution and I found that most answers prefer using % over Pixels. I found that this is correct when I viewed the code of this website http://zcsfestival.com/
you can find objects overlap in mobile resolution or when you don't maximize the window of your browser. However, when I read the code of this site http://m3adikawmia.eb2a.com/?ckattempt=1
I found that it uses Pixels and it fits any screen resolution also when I restore the browser window down. It seems perfect. I became confused about that and I want any clarification about this point.
Thanks in advnace,
One way is to define elements with % . But some times the elements will be to small in mobile resolution that it is necessary to define different CSS codes for different resolutions. Like this:
normal situation:
.container {width: 1000px;}
responsive:
#media only screen and (max-width:800px) {
/* redefining some element sizes like the example: */
.container {width:100%;}
}
And this way will continue till mobile resolution.
Information to clarify the terminology from here.
Hardware pixel: A physical pixel on the display. For example, an iPhone 5 has a screen with 640 horizontal hardware pixels.
Device-independent pixel (dip): A scaling of device pixels to match a uniform reference pixel at a normal viewing distance, which should
be approximately the same size on all devices. An iPhone 5 is 320 dips
wide.
CSS pixel: The unit used for page layout controlled by the viewport. Pixel dimensions in styles such as width: 100px are specified in CSS
pixels. The ratio of CSS pixels to device independent pixels is the
page's scale factor, or zoom.
Is there are any way to set relationship between Hardware pixel and CSS pixel like 1:1.
I mean if i want set my div's width to 100px, it will be exactly 100 hardware pixels even on Retina displays.
Screen scale factor (Retina, presently either 2x or 3x) is distinct from page scale factor. At the same page scale factor, 1px would be 1x1, 2x2, or 3x3 hardware pixels, depending on the (Retina) display.
It sounds like what you're looking to do is to drive the screen at a "native" resolution which would make it appear that it has 2x or 3x as many pixels, but at a (non-Retina) screen scale of 1.
To accomplish that, you'd have to transform the view by multiplying its size by the screen scale factor, while scaling it by the inverse of its screen factor.
You can set the head's <meta name="viewport" content="width=device-width-times-2, initial-scale=0.5"> but your content will be far less readable and sharp.
If you're looking to do this on an element basis, you can set
-webkit-transform-style: preserve-3d;
-webkit-transform: scale3d(0.5,0.5,0.5);
3d is necessary, as a 2d transformation may lead to issues with the touch area not matching up with the element's location in the view.
I think you can use device-width with min-device-width and max-device-width properties to access hardware pixels. device-width - describes the width of the output device. For example:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { ... }
Here you can find a map of standard devices and media queries for them.
Also, you can setup media queries for different devices DPI you can use min-resolution property in media on this way:
#media print and (min-resolution: 300dpi) { ... }
To replace the old min-device-pixel-ratio syntax use this:
#media screen and (min-resolution: 2dppx) { ... }
Here is a source.
Basically, in clear CSS you can't get access to hardware pixels. You can just optimize pages to different resolutions.
You can use:
#media screen and (max-width: 300px) { /* To Do */ }
link visit: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp
If you want the exact relationship I don't think you can do it in CSS.
But you can do it in JS :
To get the width of a 100px wide div :
var myDivWidth = 100 / window.devicePixelRatio;
So on an iPhone 5 with a pixelRatio of 2.0 you will have a 50px wide div spread over 100 physical pixels.
You could to the same with css transform:scale(0.5) if you want to shrink div content too.
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.
If the average / most popular screen size width is now more than 1366px, why is bootstrap widest container (from their CDN) at max-width:1170px?
.container {
max-width: 1170px;
}
Should I not believe everything I read?
This is from many sources by the way, not the first one I came across.
The underlying reason for the question is I want to design for max width desktop use - I'll worry about tablets and phones when desktop design is finalised.
About screen resolution
According to screenresolution.org, the actual most popular resolution is 1366x768, not more.
About those 1170px
For desktop display, Bootstrap use a 1170px width, with a padding of 15px on both left/right sides :
#media (min-width: 1200px)
.container {
width: 1170px;
}
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
Quick calculation : (1366 - 1200) / 2 = 83.
The Bootstrap desktop layout keep (at least) a margin of 83px on both sides of your screen (98px if you count the padding). That's not that big, and it avoid the page to look congested. For a counter-example, Wikipedia use a 100% width layout, but many people think it's "too-much", it decrease readability.
What if I want to change this ?
You don't have to be worried about Bootstrap width. Of course you can change it.
Almost everything is set in percent in Bootstrap 3.
Have a look on Bootstrap customize & download page, you'll find a few variables useful :
Media queries breakpoints
#screen-xs-min: 480px
#screen-sm-min: 768px
#screen-md-min: 992px
#screen-lg-min: 1200px
Layout and grid system
#container-sm: ((720px + #grid-gutter-width))
#container-md: ((940px + #grid-gutter-width))
#container-lg: ((1140px + #grid-gutter-width))
#grid-columns: 12
#grid-gutter-width: 30px
#grid-float-breakpoint: #screen-sm-min
The Galaxy S4, for example, actually runs at 1080p. Put it in portrait mode and you'd think it would run the full desktop site, which sounds terrible when comparing that 5.5" screen with my 24" LCD for example. It seems the phone manufacturers have put in a "fake" resolution to the browser, possibly with some sort of "zoom". I would test on an actual device, or at least an Android emulator, to see what the behavior is. I usually get the correct site even though it has a high resolution.
It could be because the Bootstrap devs recognize that many developers won't have content prepared to go that large, and it's trivial to change the width.
How to change navbar/container width? Bootstrap 3
Bootstrap: how do I change the width of the container?