Using window.innerWidth and window.innerHeight, I found that my chrome window size is 1440px * 749px. My question is, why the number 749? This is also the number I get using document.documentElement.clientHeight.
I found "749px" appearing in some other CSS media query questions, but I can't find anyone talking about WHY we use/get values like 749 or 549. Can't they be rounded up to something like 750 or 550?
Related
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.
I'm not an expert on CSS but based on what I've read, this is how min-width and min-height work in media queries.
Min width is the current width based on the current orientation of the device. Say, for instance, I had a device supporting 320x480 resolution, in portrait mode the width would be 320 and the height 480 - and in landscape mode the width would be 480 and the height 320.
I'm trying to find out if the same applies to device width and height - or whether is it fixed in relation to the device. In other words, if the device height in portait mode is 480, and I flip the phone the device height is still 480.
The reason, I'm considering using device parameters for some media queries instead of standard min/max is because the position can change if the keyboard is opened - so I'm looking for a permanent height as opposed to the fluctuating height of the viewport.
I'm struggling to find this answer and would appreciate any advice - also would like to know if there are any anomalies when using these queries.
Yes, max-width behaved the same as min-width. When you rotate the device you will get a new max-width.
So your max-width will be larger in landscape than in portrate.
The same logic applies to max-height.
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.
In IOS7 (Safari) we are seeing an issue where the iframe will not accept a lower width/height. For example, on an orientation change event the new width maybe say 600 vs 320. While it will resize to 600, going back to portrait mode, the width will remain at 600 instead of resetting back to 320. We have confirmed the values are being set correctly within the attributes of the iframe, but the css values are remaining at the previous larger values. We've tried clearing the style attribute altogether, resetting the dimensions to 0 directly before setting the new values, etc. Nothing seems to take affect. I'm leaning toward believing this is a safari bug. Has anyone else experienced this? All of the other posts that are similar all seem to be reporting scrolling issues and not resizing issues.
IOS will show all visible content, so you can't hide the overflow of an iframe. Is your content wider than the iframe? I have a feeling it might be
If you go to the "Variable Grid System" generator
and have:
column width = 20
number of columns = 12
and gutter width = 60
...the system provides a content width
of 900 and a full width of 960.
http://www.spry-soft.com/grids/
Now, this is all fine and dandy in Firefox, Chrome,
and even IE6, but when you load those settings in IE8,
you end up with the actual full width as 1000px,
not 960px.
Has this issue been encountered before?
As stated in the comments: my problem was the result of having IE's ZOOM level at 125%. At what point I had changed that, I don't know. But re-setting the zoom level to 100% eliminated the issue.