I know this is an old question, but after trying all the proposed methods, nothing seems fit.
Basically, I built this webpage, it looks fine when just loaded with a mobile device, but after screen rotation the size stays the same, (which it should not!)
1:
The first method I tried is adding the meta tag:
<meta name="viewport" content="target-densitydpi=device-dpi, initial-scale=1.0, minimum-scale=1.0, maximum-scale=2.0, user-scalable=1" />
But apparently this does not work
2:
Then I tried window.location.reload
This works! Just perfect. But it basically reloaded the whole page, and all the previous setting will be reset to the default, this is not what I want!
3:
I see someone suggesting writing two sets of css, one for landscape and one for portrait. However, this is a lot of work right?
And, in my css I did not set a lot of explicit height and width anyway. Usually it's default, and sometimes in percentage. Is this a problem?
#
It will be great if someone explain a little what actually happens when the screen rotate? Why elements are not resized properly? And on contrary, why they will be resized properly if a reload event is triggered?
This depends on which mobile browser you're testing on; some mobile browsers, notably IE10, don't report a change in screen size when the orientation changes. However, as you found out the browser does recalculate the screen size when the page is refreshed.
If you can tell us about the browser, maybe we can help more?
Related
As you could imagine, I'm trying to make my webpage responsive and mobile friendly.
I have an outer container on which I set the width dynamically using this hook (window.innerWidth). So to test if the page is responsive I open up Chrome-devtools and start making the devtools wider:
Sure it's a little jumpy but it scales correctly, as expected. The problem starts when I open up to do the same in the responsive tools:
Suddenly the whole page scales down? Also, it's hard to see but I'm logging window.innerWidth and it's not changing as I'm changing the width.
So I try it out on my cell-phone and the the behaviour is really unexpected:
On load it looks ok
Flip the phone, still as expected, but when I flip it back???
This crazy effect happens, I mean now it looks like window.innerHeight is having some trouble as well? Because the container with the gray background color has it's min-height set to window.innerHeight. And if i try going to some other page of the app and then back I get this:
It's a zoomed in version of the last image. I can pinche-zoom out from it.
So I google around and it looks like I find someone with the same problem there's a detailed answer suggesting I should use window.visualViewport.width instead. So I try it out:
Main differences, the resizing seem's a little jumpier. I'm also logging window.visualViewport.width and it is changing, but only slightly and it's not corresponding to the responsive-width that's shown above the screen.
But most importantly, it's unfortunately not fixing the problem of weirdly resizing the entire screen, and the unexpected behaviour on mobile remains. (should be mentioned that this one too, works as expected if I'm not in "responsive mode" and just resize the window.
So I spot another answer further down suggesting to use window.screen.width instead, so I try it out:
Which introduced a whole new type of wonkyness? It seems to scale correctly, but down at around a few pixels above 300 it starts to just cut-off a piece of the header while making the container (which should be the width of the screen) smaller at a faster rate than the screen?
This seem to be related to the fact that the header has the css:
grid-template-columns: 130px auto 130px;. If I lower the 130px-value, the point at which the header gets cut off lowers as well. I suppose making the screen go below the headers min-width causes some (in my opinion) really unexpected behaviour.
Though the console log (now logging window.screen.width, now correctly prints the width reported by chromes responsive tool. The bug can be seen in my phone as well
I guess my phone must be a few pixels below 300 in width. Interesting fact is that using 100vw displays exactly the same behaviour as using screen.width.
It's also interesting to look at the difference between screen.width, innerWidth and visualViewport.width. If I set the size of the responsive window to 500px and reload the window. All of them evaluates to 500px. If I set the screen to any value below the threshold where screen.width starts to cut off a piece of the screen.
screen.width evaluates to the width of the responsive window.
innerWidth and visualViewport.width will both evaluate to 309px (which I assume is the minimum functional width of the header.
If we look at how innerWidth and visualViewport.width looks on my phone:
On both visualViewport.width and innerWidth we can see a much smaller but similar line to the one on screen.width (here it can be seen on a zoomed in screenshot).
First solution
So the first and most straight forward solution would be to use window.screen.width (or 100vw) and simply make sure that no element ever push themselves outside the width of the screen.
But wait, another solution has appeared!
By looking at a comment to an answer of the previous question I see that someone solved it by changing the the viewport meta-tag from
<meta name="viewport" content="width=device-width, initial-scale=1" />
to
<meta name="viewport" content="width=device-width, minimum-scale=1" />
All alternatives, screen.width, innerWidth and visualViewport.width all now behave identically to each other and as desired:
They all log the correct width of the responsive window, the page on my mobile also works. If you look closely you can see that the header does get cut off a little when the screen goes below the 309-threshold. But with this solution it seems like the page breaks a lot more gracefully than in first solution.
So if you've already solved the problem, why are you posting this question?
Well, as you might have understood by now, I love this problem more than I love the solution. That is, I would really like to know WHY this solution works? So even though my "practical" problem is solved I'm really curious as to a few remaining mysteries:
Why does resizing the window (first video) behave differently from resizing the "responsive box" in chrome dev tools?
Why does the bug appear on my mobile when I tilt my phone, and then tilt it back again? (third picture)
Why, when I (on the phone) go into some page and back again, is the screen super zoomed in? (fourth picture)
Why does innerWidth and visualViewport.width continue to print the same value when resizing the responsive window.
Why do they weirdly scale down the whole screen instead of changing the size of the screen in the expected way (are they for some reason zooming out when making the responsive window smaller? Is that why setting minimum-scale=1 solves the issue?)
Why does screen.width behave differently from innerWidth and visualViewport.width? And why does it cause such a weird white-space effect when going below the minimum width of the header?
Are there any reason one wouldn't want to set minimum-scale=1?
I know similar questions have been asked but I have found no solution of any kind for my issue. I am building a mobile web app that has a google map embedded into it. My issue is that if a user double taps on it to try and zoom the map (which basically takes up the whole screen) it, in some cases, zooms in the browser instead of the map. Then the trouble is that the user is unable to zoom back out. Using two fingers to zoom out passes the event to the map instead of the browser and then renders the web app useless. Reloading the page keeps it zoomed in. I understand that browsers typically don't allow the script to change the browser zoom because 'controlling UI for the user is a bad idea' but in this situation I am saving the user. I don't want to do it while viewing the page, just either on load (the user will undoubtedly try and reload when they can't view/use the web app right) or on a button click.
To the best of my knowledge after quite a bit of googling on this, it is indeed not possible to change the browser zoom once the page has loaded. However, you can make a request to the browser, prior to loading the DOM, to start at a certain zoom level and/or to limit the zoom. Here is the meta tag I used to do this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
I think for the most part the attributes are pretty self explanatory, and if you are needing more/different control I'm sure there are more options to play with. Also, keep in mind this is also entirely up to the browser on whether or not it wants to follow this.
I've a problem with a website I'm designing at the moment that when it's orientation changes on an iPhone from portrait to landscape everything scales correctly for the landscape view. But when I go back to portrait, the view is like the below.
It doesn't scale back as it should; like the initial view.
I know this is a known issue on WebKit and a possible solution is explained here but it doesn't seems to be working for me since I've the following meta tag set on my page:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I know there are also some JavaScript solutions but shouldn't the above code suffice? What am I missing here?
P.S. this situation is a little bit better on Chrome for iOS on an iPhone again but then again not very well. Chrome properly scales the site when going back to portrait from landscape but it also keeps an unnecessary width from the landscape view for the portrait view as well the when I get back to portrait on Chrome I can move the site horizontally.
I'm trying to produce a mobile version of my website, but have encountered one problem:
The the whole website fits properly on the computer (with an example browser width of 480px) but leaves space on the right when viewing on my mobile phone (regardless of the browser I used). So the whole site looks good, but you can scroll "out of the website".
I first tried to disable horizontally scrolling, so I included this line:
<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
To disable the (still scrollable!) space on the right I added this to my "mobile.css":
It worked on the computer, but not on my mobile.
body{
width: 100%;
overflow-x: hidden;
}
My website is avaiable here: my mobile website
My mobile.css file is located here: my "mobile.css"
I have tested the website on following mobile browsers:
Google Chrome
Dolphin
The default android browser
I originally wanted to avoid Javascript, but if there is a javascript solution, please don't hesitate to post it!
If you want your layout to be mobile friendly, it's best to be thinking about this right from the beginning. So, for example, if you are going to set fixed widths on elements (which I don't recommend), such as—
#back-menu-left {with: 500px;}
you need to ask yourself what will happen to this on a small screen. So, either don't set that width, or immediately write an #media rule to override it on smaller screens.
(I didn't check through the rest of your code, just stopping when I found one oversized element. Best to check and see if there are any other overwide elements like that.)
I am running into some issues determining the type of browser using Javascript. My current method is to capture the screen width and height and determine the type of browser based on pixel sizes.
I figured I could assume that any screen width under 768 would be mobile, anything under 1024 tablet, and anything above that a desktop.
I've started testing on a few devices I can actually get my hands on and the results are much different. For instance on an android (Droid Bionic to be exact though it doesn't matter much) its returning a width of 980 regardless if the device is in landscape or portrait mode. This is much higher than I assumed.
Currently I am using document.documentElement.clientWidth to determine the width but I have tried other approaches such as window.innerWidth as well.
I guess what I am trying to get at is a question that has been asked many of times and I thought I had a pretty clear answer to. Apparently it might be time for a refresh on proper browser/device detection. So what is the most effective way to determine the actual size of the device I am on?
UPDATE:
It seems as if mobile browsers are actually taking it upon themselves to decide how to display my application. And in fact they are, but there is a way to stop it. See answer. Fortunately this means that the standard feature detection methods we are used to are still the best way to determine the device you are using.
Per Dagg Nabbit's comment on the question:
It seems that mobile browsers take it upon themselves to determine the way a site is displayed. This typically means taking a desktop version of a website and zooming out to fit the contents on the screen. For 90% of the internet this is necessary otherwise the mobile browsing experience would be horrifying. For responsive websites this is no good because in most cases we have very specific elements that must be altered depending on the resolution of the device the site is being viewed on. So how do we stop the browsers from doing this?
By using a viewport meta tag. The standard tag looks something like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
But there are a lot of different ways you can customize this to suit your needs. A good reference is https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag