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.
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.
I need to set a div height based on screen resolution. I am using angular 5 for coding. Even when the screen is zoomed in or zoomed out the div height should fit the place
This is my html part
<div [style.height.px]="divHeight">
</div>
And in my ts file
this.divHeight= window.innerHeight - 202;
This works only when my screen is 100% zoom. I need the div height adjusted even when the screen is zoomed in or zoomed out. Plz help me out.
Why not just use the vh property -- perhaps with calc?
div.thatShallNotBeNamed {
height: calc(100vh - 202px);
}
Edit:
vh stands for "view height." It also has a corresponding property for "view width" called vw
Window.innerHeight work for even zoom out and zoom in as well.
I assume the problem your are facing is you are not resetting height for div when you zoom in or out, you can use host listener for this purpose.
#HostListener("window:resize")
onResize() {
this.divHeight = window.innerHeight - 202;
}
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..
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?
Well I am working on an small website.
However I have problem with fixed position.
My header is 770px in width. It contain a couple of elements with it.
position: fixed; works really fine, but when I resize my website to another screen size, something like 640x480 the fixed element (header) cannot be fully visible in width.
I want it to be fixed for scrolling but I want it to be fully visible in width, if user is on smaller screen and cannot see it completely.
Here is an example on an wordpress theme.
http://dvl-den.net/
Same problem is with my small project. Try to open that website on 640x480 (resize browser) and you'll see my problem.
Thanks in advance.
I don't think there is a solution with CSS only properties. I'd try having position: absolute; on my CSS, and playing around JavaScript (my example requires jQuery) like:
jQuery(function($) { // document ready
var $win = $(window),
handler = function() {
// try not to overload browser, creating a throttle
var throttle,
throttleFn = function() {
// this is what happens on window resize
$('#header').css({
top: $win.scrollTop()
});
};
return function() {
clearTimeout(throttle);
throttle = setTimeout(throttleFn, 100);
};
};
$win.resize(handler());
});
It doesn't work really "cool" in mobile, but it's widely know there are mobile issues with fixed headers in web apps (different than native). If you need I can update with a JSFiddle example.
Check demo at: http://jsfiddle.net/qaKT7/ (you can play around with that 100 value to get a better experience, and also use .animate() instead of .css() to make it look fancier)
Try giving
min-width:770px;
or try with media queries
I think there're two ways:
Changing the width "770px" to a percentage.
Detecting the pixel height of screen, then adjusting the width according to this.