I'm using responsive and adaptive media queries for my website to accommodate smartphones...Now the problem is that my max-width mobile query ends at 480px, which is most phones rotated display width (when the phone is on its side...). Now some phones, like the HTC desire have a max screen width of 533px, now when the user first loads the page on vertical position (320px screen width) and he/she rotates rotates the screen to 533px width, it goes past my design specifications and it looks kinda crappy...(since the layout was meant for 480px max...)
Now the only way to solve that is to refresh the page once the viewport dimensions change. How do I force a refresh?
Thank you
if device rotate window resized.
window.onresize = function(event)
{
document.location.reload(true);
}
Related
I was having a hard time figuring out how to phrase this. Sorry if this is a noob question, I'm new to responsive design and mobile web design in general.
My phone (Galaxy s10e) will render my webpage as if it's 360 pixels wide, with all elements positioned appropriately based on this width. I have several image tags on the site that are the same width. I was using src images that are 360px wide, and this looks fine on desktop because it is actually rendering my images at 360px, but on mobile the images alone appear to be rendering at a much higher resolution, causing it to look terrible due to upscaling.
If someone could explain to me what is happening here it would really help, since I can't find information on this specific behavior. Some questions I have:
Is the browser choosing to position the elements based on a 360px width while rendering the actual content at the screen's resolution?
How do I account for this in my design? I considered rendering the images at the higher resolution and then having the page dynamically scale those images down (so even though the actual div is 360px, the browser can use the 'extra space' allotted by max-width to render the image at a higher resolution), but I want the images to remain 360px wide on desktop, not the higher max-width for mobile rendering.
Where can I learn all about this behavior so I know how to tackle responsive image scaling in the future?
Thank you for your time. Let me know if you have any other questions. I'm using ReactJS to develop the site.
OK so in a nutshell pixels are relative sizes. One pixel is not literally one pixel on your phone.
What happens is PPI kicks in and basically zooms in to make things readable.
Because if you actually tried to view 360px on a phone with that pixel density you'd see nothing really.
So lets look at some phone specs:
6.1 INCH
5.90 x 2.77 x 0.31 INCH
Resolution 1440 x 3040 PX ~ 550 PIXELS PER INCH
Viewport 360 x 760 PX 138 PIXELS PER INCH
Now the viewport is what you actually see on screen. in this case it give you a pixel ratio of like 4. So that means your phone has a resolution 4 times that of it's viewport.
so for a web app where a div is set to 200px wide it will display 200px as you'd expect it based on the viewport but this div is actually 800px wide relative to your phones resolution.
Now pictures don't need this limitation. Whats the point in a high res display if your pictures only display 200px with a pixel density one fourth of your screens capability.
So a picture lives in a dual reality on your phone. It has a box size which is the size of the image relative to your viewport but the image itself inside the box lives within your resolution relative to your devices total screen pixels.
So when you have and image that's 200px in the viewport its display resolution is actually 800px. So when you put a picture that's only 200px and have it on a screen that does viewport scaling which nowadays is pretty much everything you're effectively stretching that image to four times its actual size. or what ever the screen pixel density ratio to viewport is. AKA it looks like crap.
And to answer your needs on this I'm just going to direct you here to MOZ who will go over the whys and how's as well as show you what to do to combat this.
Moz on Viewports
Combating element position is pretty easy you just use :
<meta name="viewport" content="width=device-width, initial-scale=1" />
In your <head>,
Moz on Image Scaling
I'm currently investigating how to detect screen mode (portrait or landscape) and also where the edges of different screens are so I can fit a sprite sheet animation right on the edges of the phone. And refit the animation to the correct view.
I looked at the screen orientation API at https://developer.mozilla.org/en-US/docs/Web/API/Screen/orientation
which is experimental, so I might use that API to check the screen mode, welcoming any other suggestions of course.
My question though is about what tools are available to detect the edges of the screen of a device in javascript. So the animation is visible and positioned correctly.
If you're developing a web application, you could use the
window.innerWidth
window.innerHeight
properties to detect the window size of your user and change your animation as you see fit.
I want to calculate browser height without considering browser address bar and bottom navigation bar height.
The value of screen.height will give the full browser height. I've highlighted area in orange in attached image. Looking for generic solution which will work on all mobile devices
Easily:
window.innerHeight
There is an algorithm to obtain the height of the viewport excluding, if rendered, the horizontal scrollbar.
See also the offical docs.
I'm working on an SPA which uses body height:100% and one of the pages contains a form with several fields for entering information. On an Android tablet when you tap on one of these fields the soft keyboard appears, which resizes the window element and subsequently the body element, subtracting the height of the soft keyboard. This results in the page being reduced to less than 300px high, making the form unusable. On iPad the keyboard is overlaid on top of the page, so the window height is unchanged.
I have found a partial fix, which involves setting the body height to equal the window height on page load, and also on orientationchange:
$("body").height($(window).height());
window.addEventListener("orientationchange",function(){
$("body").height($(window).height());
}
This fixes the height squishing issue and means that the form can be used, however there is an issue in the instance where the user changes the orientation while the soft-keyboard is open.
The keyboard remains open after the orientation change and the window height (and the body height) is changed to the height minus the keyboard. When the field is blurred and the keyboard disappears, the body remains the reduced height and has a nasty white bar at the bottom.
To illustrate the problem, here's some numbers:
Landscape - Closed Keyboard: 688px
Landscape - Open Keyboard: 273px
Portrait - Closed Keyboard: 1168px
Portrait - Open Keyboard: 716px
If you switch from Landscape - Open Keyboard to Portrait - Open Keyboard, and then close the keyboard, the body height remains at 716px, putting a white bar along the bottom. I need to somehow work out the height that it SHOULD be with Closed Keyboard, at the point of orientationchange, while the keyboard is still open. Bearing in mind the fact that the device resolution, application chrome and keyboard sizes will vary.
You can try the CSS vh unit, which is the percentage of the viewport.
E.g. CSS
body {
height: 100vh; /* The body element is always 100% of the viewport's height. */
}
You should not need the JS event handler in this case.
I'm trying to resize my wrapper, so when viewed on iPhone, iPad or computer 100% of my site is in view. I have placed pictures in my scroller using the <ul> and <il> methods.
At the moment everything is in view on my computer, but on iPhone the pictures are getting cut off. It's letting me scroll horizontally and vertically my pictures, but need to resize the wrapper so my pictures are smaller.
Any help would be amazing. Cheers in advance
You didn't provide any codes, so these maybe help you:
Set proper width/height to your wrapper when browser resizes and window.onload. Because we don't know device is in landscape or portrait mode until window.onload. Here better explained how to get resized browser width/height.
Check your images width/height. Maybe images' dimensions wider than wrapper. You can set width/height to image in percent.
And don't forget refresh iScroll when browser resizes. You can do it like that:
setTimeout(function(){myScroller.refresh()}, 400); // browser need time to rotate