I have to calculate correct font-size for mobile. The mock-up guide I'm getting is the size of the real resolution of an iPhone 5 (640x1136). Tinkering with it, I soon realized I have to divide any value in the guide by 2, to get the correct logical font-size. Consider meta tag viewport present in HTML.
Is this a correct approach?
Yes, this is a good approach because the it is the retina screen which is actually the double of the normal resolution. like for Iphone6 we have the retina screen of 750 * 1334. But when we inspect it shows 375 * 667 so therefor it is a good approach to divide by two if mockups are provided according to retina screen.
Related
EDIT: Because I maybe wasn't clear enough. I'd like to point out I'm NOT searching for "how to use viewport". I'd like to know how that actually works on background. How is the actual number of the viewport width computed on mobile device etc.
For example my smartphone has the smaller size 1080px but it returns 414 instead. Actually not just the viewport, also simple $(window).width() returns only 414. Please read the rest I wrote before those two paragraphs. Thank you.
I also changed the title to somewhat more explicit, but you still need the read the rest. Thank you.
I'm getting familiar with using the viewport, yet I still can't see how it actually works on background. If you read viewport dimension on smartphone with HD resolution, browser returns you viewport width way under 1920 or 1080 which is the actual phone's screen resolution.
1) How does the browser come up with those numbers? Is it detecting mobile device at general or mobile device is giving the browser actual screen size (real-life screen size)?
2) How does the browser differs between smartphone and much bigger tablet, if they both have the same resolution?
3) Media queries and other stuff relies on certain breakpoints. Those are actually hard written values in every responsive design. Usually something like 480 and 768px. Is that something I can also rely to be constant? No matter how far will the screen resolution go up on smartphones in the future? I mean like 4k on 5" screen.
4) How does PC screen fits to all this? Browser doesn't detect mobile device? or machine won't give it actual screen size? How does it know it just should use the pixels as pixels (minus scrollbars etc.)?
#Saix,
Have you searched out what you actually want? You will get your answer on first search.
Here, HTML5 introduced a method to let web designers take control over the viewport, through the <meta> tag.
You should include the following <meta> viewport element in all your web pages or a common Header file under the <head> tag.
HTML
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Would like to know if adjusting the font size of the element on the webpage based on windows size is a bad or good in Responsive web designing.i.e. using http://simplefocus.com/flowtype/ for example.
There seems to be lot of confusion this area because if we have a paragraph which has 5 lines when shown on 1024px screen can become two line in 1600px screen which will result lot of space between elements and which make the screen elements scattered.
Please guide the right approach be followed.
Regards,
Sameer
When doing media queries in CSS I noted that the value in pixels that is used for min-width and max-width when working on mobile do not seem to correlate to the device's actual width.
For example, if I was to target a landscape iPhone 5 I could use max-width:568px and it gets triggered but if I google iPhone 5 resolution I see that its long side is actually 1136px.
Why is half the device's resolution being used in media queries?
More importantly, how can I stop this from happening while still using the same queries for desktop?
First of all, take a look at this chart chart here. In the terms of that chart, this happens because iPhones (and other phones as well) render points to the several rendered pixeles (so called "device-pixel-ratio").
Sometimes it even gets a little more confusing, because some devices uses upsampling or downsampling techniques to fit the physical display size.
For example:
IPhone 5s
Points: 320 x 568
Rendered pixels: 640 x 1136
Device pixel ratio: 640 / 320 = 1136 / 568 = 2
In your queries you should use points (320 x 568) as your measurement.
This article, where you can find resolutions of different devices, can be very helpful as well.
I can not resist to mentions, that it is a good practice to make breakpoints based on a content rather than targeting specific devices. See #DaveEveritt's post.
what's the best way to determine css pixel ratio for screen sizes, if it isn't listed?
Perhaps, you have these data: width = 480px, height = 800px, physical size = 4.3, ppi = 217.
Is this obvious that css pixel ratio would be 1.5? If it's obvious, is there an article, which best summarizes how css pixel ratio is derived? or relationships between ppi to physical size with display resolution?
Thank you,
There are usually listings for various mobile devices and tablets that will include screen dimensions, but also pixel ratios.
http://the-chronicon.blogspot.com/2015/01/mobile-device-screen-dimensions-and.html
Also, Chrome has a built in mobile testing evnvironment which lists this information as well for many devices. Just hit F12 in your browser and click on the little phone icon on the top left. From here you can select from a myriad of devices and the specs will be denoted as well. Hope this helps...
I am looking to make my websites appear the same size on retina and other higher resolution screens that they do on standard screens. That is to say make them optically look the same but with more detail on the higher resolution screens.
So if we had a screen with four times the number of pixels per inch then I would want the height and width of elements to be twice the normal CSS pixel measurements as well as doubling the font size.
I looked into this and it appears that the solution detects the DPI and then loads different CSS.
#media
(-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* Retina-specific stuff here */
}
The thing is these screens all have different DPIs.
iPhone 4/4S and iPod Touch (4th generation) -- 326
iPad (3rd)/4th generation) -- 264
MacBook Pro with Retina Display 15" -- 220
MacBook Pro with Retina Display 13" -- 227
So if we had a an element with a height of say 24px. I would like it to adjust its height to accurately fit whatever the pixel ratio is. IE. do the Maths and do it for all elements.
You leave the image dimensions untouched, you just give it the appropriate source.
You can also put different queries in, see here:
http://css-tricks.com/snippets/css/retina-display-media-query/
I would recommend that you read about both dpi and dppx. When you look at Retina displays you need to think about both CSS-pixels and physical pixels, as I'm sure you know.
If you want to have the componenets of the website appear in the same physical size, then I think dpi is the way to go but and add different CSS for the different dpi levels you want to cover bu if you want to differentiate between Retina and normal display you need differentiate between dpi and dppx (dots-per-physcial-inch)
These articles both helped me:
https://developer.mozilla.org/en-US/docs/Web/CSS/resolution
http://drewwells.net/blog/2013/working-with-dppx/