find screen dimensions in inches not pixels using javascript - javascript

I was reading many questions on SO regarding best ways to detect screen size in pixels which is ultimately dependant on resolution to find the actual screen size.
I know some mobile devices have small screen (say 4inch) yet the resolution is high. While some devices r having large screen (say 7inch tab) yet the resolution is low.
So when you want to display your page to the user, you really need the screen size in inches or centimetres to give the best view comforting the eyes.
So I ask:
Is there away to find out screen size of the device in inches not pixels ?
I know it can be, provided that we know the resolution! !Bec we can calculate the size from screen width and height
Appreciating any idea!

once you have got the screen resolution in pixels, you can work out the dpi with a hidden div:
<div id="dpi" style="height: 1in; width: 1in; left: 100%; position: fixed; top: 100%;"></div>
js
var dpi_x = document.getElementById('dpi').offsetWidth;
var dpi_y = document.getElementById('dpi').offsetHeight;
then work out the resolution in inches:
var width = screen.width / dpi_x;
var height = screen.height / dpi_y;
Example

Now, as far as I can tell there is no sure-fire way to accurately get the screen width of a device. Everything (including inches, 1in == 96px) is based in one way or another on screen resolution.
Now, I know this may not be the fix-all for everyone, but hopefully it helps a few people out there. It helped me, since I wanted my page to behave differently for mobile users, and my initial plan of attack was going to be based on screen size.
What I ended up doing was replacing the line
if (screen.height <= 768)
with
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent))
As a disclaimer, I should also mention that this was from an answer that is a few years old now, so some devices may not be covered.
Source: https://stackoverflow.com/a/26577897/8082614

Related

Understanding orientation, aspect ratio and CSS pixels on mobile devices

For my current project, I need to optimize a page layout in landscape mode for mobile devices. Can you help me to understand the different ways that the browser window size is measured?
I am working with an Android smartphone with hardware pixel dimensions of 720 x 1280 pixels.
Portrait Mode
In portrait mode, when I use JavaScript to get the document.documentElement.clientWidth and ~Height, I get the result 980 x 1394.
When I use the following CSS...
html {
height: 100vh;
width: 100vw;
}
body {
height: 100%;
width: 100%;
margin: 0;
}
... Chrome Development Tools reports that the size of the body is 980 x 1546.
Landscape Mode
In landscape mode, things seem even more complex. In my test, I explicitly CSS set the dimensions of the whole <html> tag to 100vw x 100vh, and the body width and height to 100%.
However, JavaScript reports the clientWidth and clientHeight as 980 x 460, while Chrome Development tools shows the dimensions of the html and body elements as 980px x 556px, although neither of these elements fills the screen width or height.
A <main> element whose width is set to 200vh and whose height is set to 100vh fills the entire width of the screen in landscape mode, but leaves a gap in the vertical direction, despite the fact that Chrome reports it to have dimensions of 1112px x 556px.
It would also be very helpful to know what exactly the different dimension properties are measuring, so that I can understand how they should be used.
EDIT:
To reply to #Kaddath: No, I had not configured a viewport meta tag. When I add the tag <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">, the dimensions change. In particular the `` clienttWidth in portrait mode becomes the screen width in hardware pixels, divided by the devicePixelRatio, which makes perfect sense. The clientHeight appears to be the height of the screen in CSS pixels, minus the height of the app bar and the built-in button bar.
In portrait mode, the values for clientWidth and clientHeight are not so easy to explain.
To better understand how browser work on different situation try to call you function with
setTimeout(showSize,300);
onresize doesn't fire correctly on all browsers.
Also try window.outerWidth and window.outerHeight.
It is very much to explain but you will learn.
You can also read https://developers.google.com/web/fundamentals/native-hardware/fullscreen/

how to set a minimum width for your site / viewport and have browser scale if the width is below that

I'm trying to wrap my brain around viewports / scales. I have a site I have to program, and the design I've been given is responsive, but it really doesn't work if the device's width is below 420px.
At anything below 420px, I'd love it if the browser would render the site as if it were 420px wide, just zoom everything out, but I can't figure out how to do this.
I've seen how you can dynamically change the meta viewport tag, but when I do this, it doesn't seem to have any affect, and I'm not sure that's the best way to approach what I'm trying to achieve.
At any rate, this is what I tried:
var minBP = 420;
//ww = window width
if (self.ww < minBP && lastScreenWidth > minBP){ //site is smaller than minimum allowed width, modify viewport
var viewportString = "width=" + minBP + ", initial-scale=1.0";
$('#blackrock-viewport').attr('content',viewportString);
}
Anyone know how to render a scaled-out 420 viewport width when the browser drops below these dimensions?
well you can do that in css by using Media Queries it allows you to manipulate evrything in diffrent screens
for exemple if you want to change the width of div in 420px screen you can do this :
#media (min-width:420px) {
div{
width:50px;
}
}
You can just use media queries to target specific elements on specific screen sizes.
For your situation, you just have to limit your wrappers width to your preferred size.
Supposing that you have a div that wraps all your page, let's say .wrapper.
#media screen and (max-width:420px) {
.wrapper{
width:420px;
}
}
Of course, you can do this also without media queries by just setting the min-width property of your wrapper.
.wrapper{
min-width:420px;
}
But I suppose that with media queries you are more flexible.

Adapt CSS sizes to specific mobile screen

I'm using JavaScript to dynamically adapt sizes of CSS elements to specific mobile screen. Something like:
var MY_DESIGN_WID = 420;
var MY_ELEMENET_WID = 200;
var actualWid = window.innerWidth;
var id = document.getElementById('myElement');
id.style.width = Math.round(MY_ELEMENET_WID * actualWid / MY_DESIGN_WID) + 'px';
I'm doing this for every relevant size of my CSS elements... Isn't there a "nicer" way to achieve the same functionality?
You can use Javascript to achieve this but it would be alot easier and more supported through devices if you just do it in CSS using #media queries.
Javascript can be turned off in most devices and CSS is also hardware-accelerated so you will also see a marginal improvement in performance.
#exampleDiv {
width: 300px; // Set width 300px
}
#media screen and (max-width: 768px){ //Apply conditions if screen width > 768px
#exampleDiv {width: 500px;} // Change width to 500px
}
I use media queries, for screen management and some times for certain effects that are hard to achieve with CSS I use JavaScript. Both JavaScript and CSS have the same access to hardware graphic acceleration.
But this is certainly easy to fix with CSS adding a class that shows content depending on screen size.
You can find libraries like velocity js to do some animations in javascript, for example
http://julian.com/research/velocity/
I really like playing with velocity is nice simple and we'll documented.
Also sometimes accesing to certain properties of the geometry of an element can make again a layout so performance when animating things from JavaScript is a key value for smooth animations, you may search for layout trashing and repaint if you go this way.

Using returned viewport queries as SASS variables

I just don't see anyone talking about this exact issue out there. Looking to have site fit any screen exactly with no scroll. Certain elements being fixed ratio (logo, video players, etc) means other areas have to expand/contract amorphically to accomodate their fixed behavior that can't ever go past 100% width or height. Difficult to explain, but the behavior in sassmeister gist below shows it working. To do this, I need to be able to define widths in terms of heights, and vice-versa (width = 56.25% of height, etc)
I can make it work using vh, vw, vmin, a bunch of calc functions etc... but browser support is patchy, and I'm unaware of a polyfill to smooth all that out. My vh, vw, calc solution below:
http://sassmeister.com/gist/3dee56a4092a86cf070a
Only other pure css I'm aware of that even begins to address this is the percent padding trick tying padded height to parent width, but this alone isn't enough. I need to be able to use min, max statements, and tie width and height going both ways.
So... unless I'm mistaken, #media queries only ever return true/false, so they can't provide an actual viewport measurement to use, right? That's what I really need... a pixel accurate measurement of the available viewport height and width.
What's the solution here? Should I use javascript to get those exact dimensions, then do all the arranging in javascript? Use JS to get the variables, then pass them on to the css?
Something like this: https://gist.github.com/scottjehl/2051999 and a method to import those returned values into css should work, no? Is that slowing the site down too much to have the js call first before anything else happens?
Also, need to find the right way to do all these calculations. Should I just be using javascript to do all the calcs and leaving stuff like the following out of css completely?
$gutter: calc(((100vh + 100vw) / 2) * 0.04)
Then using that variable inside another function:
$column-width: calc(100vw - (1.7778 * (100vh - 2 * $gutter)) - 3 * $gutter)
You get the idea. I think I'm nearing the end of what I can do with the css. JS solution? Hybrid? Something else?
thx.
It sounds like media queries are what you're looking for.
You can use the following to target screens with a max width of 1200 px and a min width of 800:
#media all and (max-width: 1200px) and (min-width: 800px) {
//some css here
}
Check out the way bootstrap-sass implements containers here.
Also check out the other SO answer about media queries.
You can even specify landscape and portrait layouts.
#media (orientation:portrait) { ... }
Or aspect ratio:
#media screen and (device-aspect-ratio: 16/9) { ... }
I hope this helps. You can use some of those fancy gutter calculations inside of/with media queries and that should simplify things a bit.
This javascript will return the screen height:
var x = "Total Height: " + screen.height;
document.getElementById("demo").innerHTML=x;
Width:
var x = "Total Width: " + screen.width;
document.getElementById("demo").innerHTML=x;
Some JQuery:
$(window).height(); // returns height of browser viewport
$(document).height(); // returns height of HTML document
$(window).width(); // returns width of browser viewport
$(document).width(); // returns width of HTML document

Changing grid depending on device orientation

I'm trying to change the size of divs depending of screen size.
If the phone is laying it changes the sizes of divs.
Example:
block is default: 330px width and 250px high on a 768x1280 screen resolution.
The factor is:
width: 330px; factor x 2,18
height: 250px; factor x 5,12
When i change my phone to laying the sizes should be:
width: 587px
height: 150px
which doesnt work in the first place, can someone tell my why not?
js:
var devicewidth = $( window ).width();
var deviceheight = $( window ).height();
var mbwsize = devicewidth / 2.18;
var mbhsize = deviceheight / 5.12;
var mbisize = mbhsize / 1.25;
$('#mainmenublok').css('width', mbwsize+'px');
$('#mainmenublok').css('height', mbhsize+'px');
$('#mainmenublok').css('background-size', mbisize+'px'+mbisize+'px');
dont get errors, it just keeps the content in the middle as 720px width (768 - offset)
I changed the main div already here:
$('#maintable').css('width', devicewidth+'px');
Will try to change window to document but can someone look at this?
With document it doesnt change either.
The calculation is correct if you look at the picture at the debug.
I also tried it in a function but that did not work.
Added a picture to explain what happens
explain:
debug:
Based on the HTML provided by the author in the comments
<div onclick="bb.pushScreen('timeline.html', 'timeline');"class="mainmenublok" id="blocktimeline" style="background-image:url(ico/timeline.png); background-size:200px 200px; background-repeat: no-repeat; background-position:center;">
<img id="pictimeline" src="ico/bbaction.png" width="50" height="50" style="display:none;">
</div>
and the js used as shown above, I suggest to use $('.mainmenublok').css('width', mbwsize+'px'); instead of $('#mainmenublok').css('width', mbwsize+'px');. Dots are used to indicate classes in CSS, as hashtags are used to indicate ID's.
You could use mediaqueries or device.js?
The way you are trying to achieve by script.... Is okay but in some browser it may give you bugs ... better you try with any of the css frameworks like twitter bootstrap its not really huge.... the your site will be responsive as according to your device....

Categories

Resources