I'm trying to create a simple text editor for Firefox OS where I use testarea as user's text field. As I'm using the simulator when I change the screen orientation from portrait to landscape or vice verse I need the textarea to change its orientation automatically and get the full screen size. But every time I change the orientation I need to reload the app :(
and if I try screen.orientation it results undefined.
Bellow code I use to get the screen size
HTML:
<textarea id="input-text" onfocus="TextareaOnFocus()" onblur="TextareaRealeseFocus()"></textarea>
Javascript:
var textAreaSize = document.getElementById("input-text");
textAreaSize.style.height = screen.height - 74 + "px"; // -74, so that the field is not edge to edge
textAreaSize.style.width = screen.width - 21 + "px"; // -21, so that the field is not edge to edge
And is there any way to change the keyboard size, cause it cover half of the screen so my text filed becomes very small.
Just set the size of the textarea in CSS, as we now have cool stuff like calc and vw/vh.
#input-text {
height: calc(100vh - 74px);
width: calc(100vw - 21px);
}
Will automatically work when rotating as well.
The reason that screen.orientation doesn't work, is because the orientation API is non-standard at the moment, so you need to prefix with moz. F.e.: screen.mozOrientation works fine.
Related
The screen.height I am talking about is described in https://www.w3schools.com/jsref/prop_screen_height.asp
I used screen.height < 560 ? true : false to determine whether the screen height is smaller than a threshold, so I can hide some UI elements in this case.
It works fine in Chrome's simulator for mobile devices (the feature highlighted below).
By "works fine", I mean when simulating a mobile device, like setting device to be iPhone X as shown above and displaying in landscape mode, the UI elements are hidden correctly due to screen.height < 560 = true.
However, on real mobile devices like a real iPhone X, the UI elements don't get hidden, which I guess is because that it is always screen.height < 560 = false, even if it is in landscape mode.
I am wondering why is that... Why iPhone X in DevTool has a different height from a real iPhone X?
Is the simulation in Chrome DevTool not accurate? Or is it because screen.height doesn't return the correct value on mobile device?
Any hints would be appreciated!
That's because the simulator takes the screen size according to the dimensions that you are setting there. But in reality, screen.height takes the height size of the whole screen, including elements that are outside of the viewport in the device. You should use window.innerHeight to get an accurate height size.
If you log in your console screen.height and window.innerHeight on the simulator, you will get the same size. If you do this in the normal viewport (deactivating the simulator), you will get different values.
More info: Screen Height - Window InnerHeight
UPDATE
screen.height doesn't update on screen rotation, always has the same value corresponding to the screen height in portrait mode, while window.innerHeight takes the current height of the device window either portrait or landscape. Just make sure to fire this in the event when the rotation happens.
For this, you could use the Window.matchMedia() like so:
// Breakpoints
const breakpoint = window.matchMedia('(max-height: 560px)');
// Breakpoint checker
const breakpointMutations = () => {
if (breakpoint.matches === true) {
// Do something
}
}
// Run breakpoint checker if media changes
breakpoint.onchange = function (event) {
breakpointMutations();
}
// Run breakpoint checker on load
breakpointMutations();
It might be because you are missing the response meta tag. Try adding this to your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
I have a in my document which I scale to full screen using the full screen JS API div.fullscreenRequest(). I find out how large the full screen actually is only after it has been activated, i.e., the fullscreenchange event has fired. In this event, I make some computations (original size of div versus new scaled-up size) so I can apply some transformations to the div to make it look right.
The issue I am having is that determining the full screen size is highly unreliable. In the fullscreenchange event, if I do detect that the full screen mode has been activated, and I use screen.width and screen.height, respectively, I sometimes get the correct values back (1920 x 1080) but sometimes I get 1920 x 948 for no apparent reason, non-deterministically. It appears that the event fires in some sort of racy way while the screen is still switching to full screen mode?
What is the reliable way of determining the full screen resolution?
What about this:
const width = window.screen.width * window.devicePixelRatio,
height = window.screen.height * window.devicePixelRatio;
console.log("screen size:", width + "x" + height);
I'm running into a very annoying issue.
I have a html canvas that is full screen. When changing the screen size it detects that the screen size has changed and automatically re-scales the canvas to the 'new' full screen.
I put a object into the canvas (basically a text input field).
On mobile when clicking on this object the virtual keyboard pops-out and apparently changes the screen size. By doing this the canvas scales to the 'new' screen size.
I want to ignore the automatically scale function when a digital keyboard pops out.
Is there any way to detect when a digital keyboard is displayed?
The only thing I can think of to fix this is to stop the page from resizing if there is a digital keyboard displayed:
$(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});
});
My issue is a hack for a dubious mobile browser discrepancy between the 100vh and the area hidden behind the mobile browser bars. This is a problem for any page where a full screen effect is desired.
The hack detects the difference between the VH and the actual visible viewport. However the simple js in the first code example appears to be detecting it backwards. So if the browser bar is overlaid the value should be 75 but is instead 0 -- likewise when the the browser is large it should return 0 but instead returns -75.
This can be reproduced simply by testing an iPhone with the 'develop' tool in Safari on google.com and entering this in the console.
document.documentElement.clientHeight - window.innerHeight
This seems to compute the shorter browser height with the top offset to compensate for the browser bar as being offset by 0 and the tall browser height where the browser bar is no longer covering the top of the page at -75px. This, to me, appears to be very wrong and should be 75 and 0 respectively. The below example is how I think it should work to properly offset the body tag to position elements with absolute positioning.
function fixIt(){
var offset = (document.documentElement.clientHeight - window.innerHeight);
document.body.style.marginTop = offset;
}
fixIt(); // run on resize
My extra super hacky solution it to offset the body by 75px by default and to assign the old value on vertical resize. (so when the browser bars hide, instead of 75px offset, use previous offset of 0 and save the 75px offset for the next resize). The works in Mobile Chrome and Mobile Safari, but for instance, if the link is opened in facebook where there is no browser bar and no resize events, it is offset by 75px permanently. This code is obviously insane and should be banished into the nothing.
var offset;
var oldOffset = 75px;
function fixIt(oldOffset){
offset = (document.documentElement.clientHeight - window.innerHeight);
document.body.style.marginTop = oldOffset;
oldOffset = offset;
return oldOffset;
}
fixIt(oldOffset); // run on resize
As an aside, or for further reading, here's a big complaint blog on the issue. https://nicolas-hoizey.com/2015/02/viewport-height-is-taller-than-the-visible-part-of-the-document-in-some-mobile-browsers.html I agree with the browser vendors that VH should be constant (because the reflow would be obnoxious for everything besides the actual body height) but for the top level elements like body and html tags on mobile this behavior appears to be wrong and it makes no semantic sense, plus these computed numbers appear backwards, further making this issue headache inducing.
What other solutions are out there?
We're building an HTML5/JavaScript app developed for tablets, and we want to lay out my screens differently in landscape versus portrait.
Originally, we were capturing orientation change notifications, and keeping track of the current orientation (generally reported as 0, 90, -90 or 180 degrees -- see this question). Unfortunately, different devices report different orientations as "0". That link argues that it's a bug, but there's some evidence that this is working-as-designed -- for example, this article suggests that "landscape" is the default orientation and those devices report an orientation of "0" when held in landscape mode.
We next tried to just look at the actual screen size, assuming that when width was greater than height, we were in landscape mode. But this algorithm gets confused when the on-screen keyboard is displayed -- when the keyboard is displayed, the dimensions of the visible area are returned. When the device is, strictly speaking, in portrait mode, but the portion of the screen not obscured by the keyboard is wider than it is tall.
The response to this question is quite old. Is that still the best answer? Does anyone have a good algorithm that takes the keyboard visibility into consideration?
http://jsfiddle.net/jjc39/
Try this:
<span id="orientation">orientation</span>
$(document).ready(checkOrientation);
$(window).resize(checkOrientation);
function checkOrientation() {
var orientation = "Portrait";
var screenWidth = $(window).width();
var screenHeight = $(window).height();
if (screenWidth > screenHeight) {
orientation = "Landscape";
}
$("#orientation").html(orientation);
}