I tried zooming in a webpage by touch instead of using Ctrl + and seems like the elements remains to be in same size but the screen is just zoomed, I assume that it does not change the size of viewport.
While using Ctrl + for same it orients from desktop view to mobile view if zoomed in too much and the elements adjust.
How does the viewport works when touch by zoom on webpage?
Use the following to check the size of your viewport at any point:
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
The answer may vary between devices and browsers..
Related
This question states what I took months to figure out:
is mobile viewport size larger than screen size?
That is, the contents rendered in the screen area of mobile browsers sometimes are just part of the viewport. They are the same only when the zoom-out specified by meta viewport tag is the current zoom value.
Some problems arise with this model, eg: css-sticky headers do not appear in the screen and centered elements (relative to the viewport) are not centered relative to the screen. The final user loses some information depending on the zoom.
I could try to solve those positioning problems if there were some css values that refer to the screen area size and position. Which are them?
Or, at least, is it possible to get the visible screen rectangle with javascript?
EDIT1
I checked for changes in properties directly under window, window.screen, document and document.documentElement while moving the screen position, but no changes were detected other than when the true viewport needed to move because the screen moved out of its current bounds.
EDIT2
First answer do not address the problem. I put the code to run and console.log the result each 1 second here:
http://wlee.eu5.net/viewport.php
Open it on Chrome simulating mobile devices and scroll a little. Even though the screen has moved, the logged dimensions will not change until the screen reaches the true viewport limits.
You can see it looking to the "I am centered" text, which is always in the center of the viewport, but not screen. Also, the viewport has red outlines.
I think mobile browsers take a piece of the viewport to show into the screen, and that's precisely this piece's position that I am looking for.
Found it! It comes under window.visualViewport.
https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport
The method JSON.stringify were not able to get visualViewport properties, so I couldn't watch them changing while scrolling the page.
Summary
visualViewport.pageLeft/Top gets the scrolled viewport relative to the page.
visualViewport.offsetLeft/Top gets the screen rectangle relative to the viewport. This rectangle is what mobile browsers show on screen when you zoom the page, which happens without changing the page scroll.
No css found for this one. I'll keep searching.
If a webpage is supposed to adapt to mobile devices, it would be a great practice to add a viewport meta tag to your page, so that your viewport will be represented equally across all devices. You can read more about this meta tag here.
There are vw, vh, vmin, and vmax size units in CSS which are related to the viewport parameters of the user's device. If you would like to make an element adapt to the size of the user's viewport, then specify its size in these units instead of pixels or percentages. You can read more about using these units here.
If you want to go beyond just scaling an object proportionally to the current viewport, you can of course retrieve the viewport information by using JavaScript. Here is a function that does exactly that:
function GetCurrentViewportLocation() {
const xOffset = window.pageXOffset,
yOffset = window.pageYOffset,
vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0),
vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
return {
topLeft: { x: xOffset, y: yOffset },
topRight: { x: xOffset + vw, y: yOffset },
bottomLeft: { x: xOffset, y: yOffset + vh },
bottomRight: { x: xOffset + vw, y: yOffset + vh },
}
}
Zooming the screen in updates the coordinates accordingly.
A known problem if you are using percentage (or viewport unit) width and height for <body> is that when mobile keyboard invoke due to input the size of any percentage/viewport element will change .
I've searched a lot about this problem and nothing could really help.
I found one of the answer is to adjust the layout according to the new viewport :
mobile viewport resize due to keyboard
but this is not really practical.
Does anybody know how to manipulate mobile keyboard on web ?
After some test's I found a hack that i'll put in the answers, if there are better ways, please tell :)
Use JavaScript/jQuery to set the height and width of <body> in px.
Using this code:
$(function() {
var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
$("html, body").css({"width":w,"height":h});
});
In this case <body> will be set in px according to the viewport size and will stay constant with any changes to the viewport.
If the keyboard covers the input you can easily change the position of the input to fixed and top to 0.
I want to develop a html5 mobile game. As you know, the screens of mobile devices are different size, so I want to create a responsive canvas so that it can adapt different screen.
The simplest way is to resize your canvas with JavaScript, based on the viewport, and then reflow the contents.
var w = $("#container").width();
var h = $("#container").height();
stage.canvas.width = w;
stage.canvas.height = h;
// Simple "fit-to-screen" scaling
var ratio = contentWidth / contentHeight; // Use the "default" size of the content you have.
var windowRatio = w/h;
var scale = w/contentWidth;
if (windowRatio > ratio) {
scale = h/contentHeight;
}
content.scaleX = content.scaleY = scale;
Here is a simple example. It is a bit different than the sample code to make it work in a resizing window. http://jsfiddle.net/lannymcnie/4yy08pax/
If you are dealing with mobile devices, there are some other things to consider (they auto-scale canvases to account for their high DPI).
Hope this helps.
I'm working in a webpage that i want to display on a digital signage screen which has a built-in web browser. Since the screen does not have a built in "turn screen 90 degrees (portrait)" mode i have to do a workaround.
I'm trying this using the following CSS:
body{
transform: rotate(-90deg);
...
}
I am using a liquid layout for this page (working in percentages) and this page is going to be displayed on a 1080x1920 screen (hanging vertically in portrait mode)
However when i display the page in my browser without rotating the screen everything seems fine.. When i rotate it, it falls out of the screen and elements don't align correctly and the page feels zoomed in instead of stretched in the browser.
Does anyone have an idea of how to fix/code this?
If you need more info or code please let me know i will post it here.
You need to switch the height and width values when you rotate the body, something like this:
$("body").click(function() {
var height = $(window).height();
var width = $(window).width();
if ($(this).css("transform").indexOf("-1") == -1){
$(this).css("transform", "rotate(-90deg)");
$(this).css("width", height + "px");
$(this).css("height", width + "px");}
else{
$(this).css("transform", "rotate(0deg)");
$(this).css("width", width + "px");
$(this).css("height", height + "px");}
});
Doing this in Fiddle positions the body so it is offset up and to the left, so you'll have to figure out how to fix that, here is my fiddle, I have also included a function to get the position of an element which might be helpful:
http://jsfiddle.net/jz0odbbz/3/
Basically, I have a div that contains my entire website. it has a height of 625px and a width of 1250px. Is there any way to resize this while keeping the scale when the browser window is resized or its used on a mobile/tablet? I know someones gonna say use % instead of px but I have a very controlled UI.
Also is there anyway to bring up a pop up when the websites used in a certain browser?
Thanks
The best and most straightforward answer is to use %, simply because this is the intended use. I'd really advise you to rework your layout so the percentage sign can be used.
If this does not work for you, there is always Media Queries http://www.w3.org/TR/css3-mediaqueries/ or Javascript as pointed out by #sable-foste and #abdul-malik.
For whatever reason you are doing it you can use this (using JQuery):
$(window).resize(function() {
resizeSite();
});
function resizeSite(){
var winH = $(window).height();
var winW = $(window).width();
// you will want to do some stuff here for deciding what to do and when...
// when the window size is too small shrink the site using your ratio
// when the window is larger increase the size of your site i.e.
// Height = Width / 2
// Width = Height * 2
var tgtW = winH * ratio;
var tgtW = winH * ratio;
$("#siteContainer").height(tgtH).width(tgtW);
}
And add a call to the function on load as well. I think doing this would probably create you even more issues though as this would just shrink the size of the containing element, what happens to the content of it? If it was scaled down to fit on a mobile phone in portrait the display would be tiny and pointless, what would the layout inside it be?