I have a popup on my site. After the popup opens, I resize it to take up most of the screen:
jQuery( window ).resize(function() {
var windowHeight = jQuery(window).height();
jQuery('#BookingFrame').css('height', windowHeight * 0.9 | 0);
});
Problem: On iPad, the window resizes past the viewport and the bottom half of the popup disappears. There is literally no way to complete the form on an iPad.
I've seen a lot of explanations on here about the "why" but I have not been able to find a workable solution. Any changes suggested in these forums results in breaking another part of the page or site on other devices.
I'm thinking I need to identify the device ($device==iPad) and then change the windowHeight to windowHeight * 0.5 or something similar. Is this the best solution? or is there something simpler?
Depending on what browsers you need to support you could use vh units instead of px/rem/% so you eliminate the need for js to resize the popup.
Related
I have been looking at way to detect what screen size I am working with for a website. i.e. iPhone, desktop, tablet, etc.
So far I have come across quite a few methods. I am just looking to see if there is a preferred method, one that is more universal, etc. I realize there is rarely a one size fits all method. Just looking for the best.
If it makes a difference, the website will be a very minimalistic website. It's more of an add-on page for an app. So there will no bells and whistles on it.
window.innerWidth
...
screen.width
...
document.body.clientWidth
...
window.outerWidth;
window.innerWidth = the inner width of your current window (as you adjust the size it will give you the actual width of the window itself... ideal for responsive development).
screen.width = the size of your actual screen.
For application development, I'd recommend utilizing window.innerWidth.
I have been searching for the best part of a day in order to try and find a way around this but cant. So here I am.
Basically I am working on a component which is position: fixed; to the bottom of the mobile browser's viewport window. This is trivial in itself.
The issue is that the company's native iOS app has an Apple association file which presents the Apple smart banner to open the native app at the top of the page.
When this is presented to the end user it seems that the browser redefines what it classes as the bottom of the page and, as a result, anything which is fixed to the bottom of the page is overlapped by the navigation toolbar which appears.
The only solution I can think of is to write out a list of all Apple mobile device viewport sizes and then compare the size of the window.innerHeight value on the onresize event -- which seems like absolute overkill and still has some nuance in itself.
I have added some screen shots to illustrate the problem and what I would like to achieve.
Thank you in advance to anyone who can assist with this. I have searched through the answers to other questions but they all seem to be people either trying to surface a smart banner or people trying to redirect to their app.
I have managed to find a solution by leveraging the resize event in the document window and then setting the top attribute of the element to window.innerHeight - element.clientHeight.
If there is a better, more performant way of achieving this I would love to still hear the answer but I will, for all intents and purposes, mark this as answered.
On a side note this does feel like a bug in the Safari browser itself as it seems that Apple are altering what they consider to be the bottom of the document.
Solution:
window.onresize = () => {
const button = document.querySelector(".add-to-bag--sticky");
if (button) {
button.style.top = `${window.innerHeight - button.clientHeight}px`;
}
};
How can I calculate the window height on mobile devices in order to see if controls are visible after scrolling?
window.innerHeight
only gives me the size of the visible area. Desktop browsers should return the same value as window.innerHeight as no controls are visible over the page.
Any ideas? Thanks
I really don't know. You mayby already tried this. But window.outerHeight mayby works?
Link i got is from: https://developer.mozilla.org/en-US/docs/Web/API/Window/outerHeight
i hope it helps
I'm trying to detect the actual monitor resolution or size using either JQuery or JavaScript, the screen.availWidth or screen.width seem to work in all browsers except for firefox and explorer...
If the window is maximized it will get the information but if the window was scaled down or even zoomed it doesn't give the monitor resolution but looks at the window instead...
I've gone through several posts on here but haven't found anything and I think most of them are not stating the fact that the window size might not be maximized or zoomed when getting the wrong type of information...
I'm hoping there's a solution I'm missing, thanks ahead for any help ;)
JavaScript var x = "Available Width: " + screen.availWidth;
With jQuery:
$(window).width();
$(window).height();
I worded my question wrong before, my intention wasn't to change the resolution of the user's browser settings. I'm mainly wanting to layout my page for the smallest common resolution size and have it zoom in to fit the resolution if the user's resolution has a higher setting. Like if the user's resolution is 800x600, my website will look just like I designed it, but if the user's resolution is 1280x800, my website will zoom in to fit that resolution without changing the layout of my website, which would make the font and size of everything bigger while keeping the same look and layout of the website. If there is a way, how can I? Thanks in advance :)
No there is not. This would be very annoying for the client. You have to have to change your site to fit the users resolution. As the comments suggest, make it responsive. If you search for responsive web design you'll find a lot of articles on ways to do it. We are sometimes limited in javascript because some things would be a security issue (this one would be more of an annoyance).
Just think about it - while browsing the web - if every website you
visited changed your monitor's resolution!
So to sum up, the reason that so many make their site fit the users resolution is because you can't change the user's resolution.
You can't do that, and you shouldn't.
You'll have to make your web site accommodate the user's current browser window size as best you can. You have no control over the browser window size or screen resolution and even if you did, it would be unprofessional and impolite to change these things without such a change being understood by and initiated by the user.
The browser is not the computer. It is just one application among many. You don't know what the user is doing with his screen--what if he is playing a video in one corner and wants his browser window exactly where it is?
What if he is visually impaired and has his browser zoomed in like crazy? I know someone who wears thick glasses, uses the on-screen screen zoom accessibility box, and still leans in to about 6 inches from the screen to be able to see anything. You would not be doing him a favor to change anything about how his browser and screen are laid out.
Any website that somehow changed how my browser to fit the screen, altered my browser's resolution, or changed my monitor's resolution would:
Be instantly added to my "forever hate list" and never visited again.
Be worth telling all my technical friends about it to get them to laugh
Be submitted to thedailywtf.com for future folks to marvel at
Be in my next blog post about software not being arrogantly evil and not acting like it owns the user's computer, a subject I have never blogged about before but would be utterly compelled to do so in this case
Receive a polite but pointed email that such meddling with my computer without permission is unprofessional and rude, and furthermore that the offending decision-maker who approved it should be soundly whipped.
There are video playing plugins that can maximize to full screen at user request and user request only. Doing such a thing requires a java applet.
As others have stated in the previous answers changing the screen resolution may be a bad idea (if not simply impossible), but you can change the scale of the contents so it exactly fits your window.
I wrote the piece of code below for a web application I designed for devices with exactly a 1280x800 resolution. In the end I decided to also occasionally use it on a 1080p screen, so some scaling was required to get it to fit perfectly. This is what my code below does.
I am using the fullscreen API (this wrapper: http://sindresorhus.com/screenfull.js/) to make the browser go full screen via a button and this same button triggers the auto scaling at the same time. You can find a working example here: http://jsfiddle.net/QT5Nr/5/
Beware this piece of code currently requires jQuery 1.8.3 and screenfull.js, but can easily be changed to work without them. I left my comment on top intact to explain why I override the jQuery offset function. You can also test why I did that by commenting that piece of code out in the jsFiddle, then resizing the frame.
/*****************************************************************************************************************************************\
|** Scale elements to fit page **|
|*****************************************************************************************************************************************|
|** Because we created a static size layout for our target device other devices will not have a 100% sized layout. To fix this we **|
|** change the scale of the body element so that it's contents fit exactly within the available window. **|
|** In addition we have to override jQuery.fn.offset in order to fix problems where the offset returned by this function is exact to **|
|** the current location of the element (with it's scale), while it has to be the exact location of the unscaled element. **|
\*****************************************************************************************************************************************/
function EnableAutoScale() {
function AdjustScale() {
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var viewportWidth = $('#viewport').width();
var viewportHeight = $('#viewport').height();
var horizontalScale = windowWidth / viewportWidth;
var verticalScale = windowHeight / viewportHeight;
$(document.body).css('transform-origin', '0 0');
$(document.body).css('transform', 'scale(' + horizontalScale + ', ' + verticalScale + ')');
document.body.HorizontalScale = horizontalScale;
document.body.VerticalScale = verticalScale;
}
$(AdjustScale);
$(window).resize(AdjustScale);
// Override offset so it continues working with the scale set above
jQuery.fn.originalOffset = jQuery.fn.offset;
jQuery.fn.offset = function () {
var offset = jQuery.fn.originalOffset.apply(this, arguments);
offset.left = offset.left / document.body.HorizontalScale;
offset.top = offset.top / document.body.VerticalScale;
return offset;
};
}
$(function () {
$('#fullscreen').click(function () {
$('#fullscreen').hide();
EnableAutoScale();
if (screenfull.enabled)
screenfull.toggle();
});
});