This is about the minimal view (ie., when you touch-drag enter "fullscreen"):
When viewport width is 320, then window.innerHeight is 529.
When viewport width is 640, then window.innerHeight is 1057.
Notice that viewport increased twice, but window.innerHeight did not (it should have been 1058 = 529 * 2).
I do not have an in-depth understanding of the issue, but I am guessing it has to do with mapping of logical pixels to physical pixels. I'd like to share my findings/solution, in case anyone else stumbles across a related issue.
I am using proportion to deduct the innerHeight at a specific viewport width.
To build the proportion, I am using an arbitrary third viewport that is greater
than the other two. The innerHeight of the viewport in the proportion is derived through trial.
When viewport width is 1280 (320 * 4), then innerHeight is 2114.
1280; 2114
320; x = Math.round(528.5) = 529
1280; 2114
640; x = 1057
This allows us to get the innerHeight of the fullscreen page for an arbitrary viewport width.
Related
I want to convert px to the viewport units (vh and vw). So I used these with no success?
var newWidth = yourElement.outerWidth / document.documentElement.clientWidth *100;
var newHeight = yourElement.outerHeight / document.documentElement.clientHeight *100;
I just get NaN.
I put my calculation in a timeout to be sure I'm selecting the element only when it's rendered.
How can I convert px to viewport units correctly?
yourElement.offsetWidth should work for you
Check out this answer to identify the sizes properly: How do I retrieve an HTML element's actual width and height?
I need to expand the canvas to full screen, when I'm going to the fullscreen mode in my game.
I use screen.width and screen.height to detect the screen size.
The problem is, if screen scale settings in Windows 10 are set not to 100%, screen.width is less than actual screen size. For ex., if it is 150% scale in Windows settings, screen.width is 1280, but in the page space it is still 1920 px.
I can use window.devicePixelRatio, which returns 1.5 in this case, for correcting the size. But the page zooming also affects devicePixelRatio value.
So, if the page is zoomed to 67% and Windows screen scaling is 150%, devicePixelRatio will return 1.0, but screen.width returns 1280. But I need the way to know that the screen size is 1920.
The Windows 10 scale settings I'm talking about:
After talking with a Chromium developer related with the dpi feature, it seems that the best you can do is:
canvas.width = Math.round(window.screen.width * window.devicePixelRatio / (window.outerWidth / window.innerWidth) / 80) * 80
canvas.height = Math.round(window.screen.height * window.devicePixelRatio / (window.outerWidth / window.innerWidth) / 60) * 60
That works in Chrome and Firefox. You might wonder what are the 60 and the 80 numbers doing there. It turns out, that 60 is a common multiple of all the usual resolutions in height, and 80 has the same role for width. So we can use those values to correct weird decimals occuring during those operations.
Then, if the canvas is in fullscreen you can also do:
canvas.style.width = window.innerWidth;
canvas.style.height = window.innerHeight;
Which would work "almost" perfectly. In my case, I notice that for some zoom values, the canvas.style values could be one pixel too short or too long. Because of this, I recommend you to have body.style.overflow = 'hidden' when you use the fullscreen mode and an appropriate background color.
I want to make scroll bar using two divs with heights of 110px and 10px. The smaller one is inside the tallest one. That gives me room to change the margin-height of the smaller one from 0 to 100px and it will still fit inside the taller one.
In case you wonder, the 0 to 100px is what I meant on the question title by fitting on a scale from 1 to a 100.
What I want to do now, is to figure out how to calculate the ratio to make my 10px height position in relation to the taller div proportional to the document.height ratio to the window.height.
I've been experimenting all night long but haven't got anything functional. Here is some of the code that I have, but I'm erasing all related to what I'm questioning here because I want to hear pure ideas.
Please advice.
var wheight = $(window).height();
var dheight = $(document).height();
document.getElementById("wheight").innerHTML=wheight;
document.getElementById("dheight").innerHTML=dheight;
document.getElementById("sidescrollbtn").style.marginTop = '70px';
http://jsfiddle.net/vinicius5581/2y63xnxa/4/
Calculating to a percentage is pretty easy.
Then scaling the percentage up to the size of the scrollbar is trivial.
var offset = $(window).scrollTop();
$(window).scrollTop(offset + 20);
var wheight = $(window).height();
var dheight = $(document).height();
//yep, this is all there is to it.
var percentualOffset = (offset / wheight) * 100;
//or use dheight. i'm not sure which applies to you
//var percentualOffset = (offset / dheight) * 100;
$("#sidescrollbtn").css("top", percentualOffset);
for a working implementation, see http://jsfiddle.net/2y63xnxa/9/
I'm trying to design a web using flex-boxes in order to fit it to any kind of screen size. My main screen has a canvas, so... which is the best way to resize the canvas during the inizialitation?
I have tried these two ways. My first way was to use CSS and set a percentage for its size. For example, width=100% and height=100%. Despite the design worked, I found that there were a lot of issues when playing with the coords of my canvas. For example, when dragging an item, my mouse coords where amplified by ten times or so.
Despite I could manage that, I think it's not the best approach.
The second way was to set a fixed size when the onload and onresize events when they are fired. I was doing something like this:
window.initHeight = window.screen.height;
window.initWidth = window.screen.width;
/*The height of the navbar.*/
navbar.height = document.getElementById('navbar').offsetHeight;
canvas = document.getElementById('canvasStage');
canvas.width = window.initWidth;
canvas.height = window.initHeight - navbar.height;
canvas.setAttribute("width", canvas.width);
canvas.setAttribute("height", canvas.height);
The problem is that the height seems to be too big:
http://i.imgur.com/WI0jGH2.png
How could I fit the screen exactly through this way?
The third way, but I'll try to avoid it, is to set a fixed size and let the small screens to scroll on the page.
Thanks!
UPDATED:
This is my JSFiddle:
http://i.imgur.com/NRTykLv.png
window.screen.width and window.screen.height returns the width and height of the screen which includes all bars (evrything you see on your screen).So you have to use window.innerHeight and window.innerWidth in order to get the view port height and width
Replace
window.initHeight = window.screen.height;
window.initWidth = window.screen.width;
with
window.initHeight = window.innerHeight;
window.initWidth = window.innerWidth;
I have an iPad 2 canvas app (game) and would like to get it to run on the new iPad retina display.
Simply put, what is the best method to stretch/shrink my iPad2 image for retina iPad models?
From the googling I've done, I've seen various methods but many include starting with retina sized images and scaling done.
I've also heard the performance of pushing retina quality sized pixels to the screen is slow, and that it is better to use iPad size images at the expense of some quality.
As it is right now, on the new iPad I see the top left quarter of my app, which makes sense, but performance is shocking compared to iPad 2.
Techniques I've seen include CSS media queries, using the pixel density, and CSS transforms - which are apparently quite fast.
Thanks
I've put together a simple function to handle this problem. Basically, it takes the current canvas size and scales it by the device-pixel-ratio, shrinking it back down using CSS. It then scales the context by the ratio so all your original functions work as usual.
You can give it a shot and see how performance fares. If it isn't what you hoped for, you can just remove it.
function enhanceContext(canvas, context) {
var ratio = window.devicePixelRatio || 1,
width = canvas.width,
height = canvas.height;
if (ratio > 1) {
canvas.width = width * ratio;
canvas.height = height * ratio;
canvas.style.width = width + "px";
canvas.style.height = height + "px";
context.scale(ratio, ratio);
}
}