Is there a best practice for this?
Our app is an application form, so there's a series of views with forms that the user fills out and clicks a button to transition to the next view.
What's happening (at least with Chrome on my android, accessing the web app) is that Chrome zooms in while I'm filling out the form--which is helpful--but then it stays at that zoom when I go to the next view. I'd like it to reset to show the whole page.
I can think of two options:
Set <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> to prevent scaling at all. First, I haven't tested this yet to confirm that it will prevent the browser from helpfully zooming. Second, accessibility is very important to us, so I'm really not comfortable with this solution.
Reset the zoom somehow (with javascript?) on view load? This seems hacky to me.
Recommendations?
I don't think it's anything about how I'm doing the view transition that's affecting this, but just in case: the button on the form is something like:
<button ng-click="save(sections, nextSection)" type="submit">
Next Step
</button>
and the save method in the controller is:
$scope.save = function(sections, nextSection) {
applicationForm.set(sections);
$location.path(nextSection);
}
where nextSection will be a string like "/questions/2".
Setting maximum-scale to 1 is an accessibility violation because all text must scale to at least 200% according to WCAG 2 success criteria 1.4.8.
If you set the font size of the input field to greater than 19pt, then it will no longer zoom when focused to edit.
This question was subject to many interrogations from Chrome Users.
Since Nov, 26 2014, min size for avoiding autozoom feature is 16 points :
see minReadableCaretHeight in sourcecode:
https://src.chromium.org/viewvc/blink/trunk/Source/web/WebViewImpl.cpp?pathrev=186037
Also read line 4528 to 4531:
A document is considered adapted to small screen UAs if one of these holds:
The author specified viewport has a constrained width that is equal to the initial viewport width.
The author has disabled viewport zoom.
So you should only define :
<meta name="viewport" content="width=device-width" />
in order to make it ok for your application and disable that annoying feature. User will then still be able to zoom if needed.
Related
black space in bottom of the page
Recently I started seeing this black screen after the ios 15 updates in the safari browser , I am using react 16, material UI v4.11 and Dialog to render this modal.
It was fixed after I added height:100vh in the HTML tag
If you're like me and you've poured over every single document you could and nothing seems to work, I managed to find something that I deemed good enough.
My solution was to figure out where the black colour was coming from and just change it to match the colour of my footer.
In your index.html, change this meta tag
<meta name="theme-color" content="#000000" />
and change the colour the match your content. Mine was white.
<meta name="theme-color" content="#FFFFFF" />
Black bar should now be white so it's no longer noticeable.
The downside to this is that if this is happening in multiple places and you have multiple colour schemes on the bottom, you're stuck with that one colour.
But if your app is relatively simple and this is only happening in one place (for me, an input form), then this might be a good enough solution.
I am beginning a landing page for a client. I have made it responsive, but when I open it up on a mobile phone, it pops up large and cuts off the page. I have to pinch the screen and zoom out in order to get the full content. How can I code it to where it is already just 100% there without having to zoom out?
Whether use CSS Media Queries or Boostrap framework which will provide you with predefined classes to add to your HTML elements in order for them to adapt on different screen sizes.
Double check that you haven't hard-coded widths for any images, divs or other elements on the page. Instead use relative sizes when you can, eg width: 50vw; . Setting max-widths is sometimes necessary as well, eg max-width:100%;
As per the earlier suggestion from Blueware, media queries will help you set styles based on the viewport or window size.
Also check that you have included a viewport meta tag in the head of your page:
<head>
....
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
If still no joy, post some code or a URL.
Good luck!
I'm working on a page here that I can't get to display sanely on a mobile phone. I'm reading it with a Samsung S7. The page looks like this on the desktop (without the width arrow and dimension):
and that's what I would like to see on the S7: a simple scaled down version of the original. The width is 1200px. I have the meta viewport tag below on the page:
<meta name="viewport" content="width=1200, initial-scale=3">
Sometimes this viewport tag works, giving me exactly what I want. But if I load it again, the page may load offset to the left so that the menu is off screen. Or it will load magnified. After it loaded incorrectly once, I kept tapping and swiping and it suddenly snapped to the correct layout above.
I've experimented with the viewport tag. The initial-scale value doesn't seem to have an affect, I've tried 1 and 3 it's worked with both and failed with both. The width seems to have to be 1200 or it will fail everytime.
Can anyone suggest why this is behaving so erratically?
Thanks
a simple scaled down version of the original.
For that, you should not use
<meta name="viewport" content="width=1200, initial-scale=3">
Use
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Because, if you set width=1200px, you may have to scroll it in mobile device.
But in width=device-width, it automatically fetch the available width of device and stretch accordingly.
You can read the official documentation here on MDN
There are some other attributes regarding to zooming.
They are minimum-scale , maximum-scale, user-scalable.
minimum-scale -> The minimum zoom level <int> value
maximum-scale -> The maximum zoom level <int> value
user-scalable -> Whether allow the user to zoom or not. yes or no
At http://sallymilo.com/aem/, when I move my browser narrower, this template narrows to one column as I want. On my phone, however, I'm just seeing the whole template on one screen. I'm quite new to responsive design, so I must be missing something obvious to those of you who know better than I. Please advise.
It's an easy fix, you need to have a viewport meta tag in the head of your page, without this the default behaviour of mobile devices is to scale your page to fit the screen.
Here's a starting suggestion:
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
https://css-tricks.com/snippets/html/responsive-meta-tag/ has more details on some of the properties you can set within the meta tag.
I'm trying to configure a viewport for mobile Safari. Using the viewport meta tag, I am trying to ensure that there's no zooming, and that you can't scroll the view horizontally. This is the meta tag I'm using:
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
On my iPhone when I load the page, it seems to look okay:
But I can scroll horizontally, so that it looks like this (this is as far to the right as I can go:
When I swing it into landscape view, the page renders as expected, locking the horizontal scroll position.
I'm trying to figure out how to make this page not scroll horizontally at all. Is it possible that I've got some page element pushing the content out? I wouldn't even expect that to be possible with a correct viewport set, but I'm grasping at straws here.
Is it possible that I've got some page element pushing the content out?
Yes, that is indeed the case. The viewport setting only defines the visible viewport area but does not deal with turning off sideway panning.
So, in order to avoid this from happening, set an overflow:hidden on the element that contains your content, or else, avoid elements from overflowing.
NB: other mobile browsers also support the viewport meta tag since a while, so you'll want to test in those as well.
body { overflow-x: hidden; } also works.
Late to the party here, but I just had a similar problem where I had horizontal scrolling across an iPhone 5, the site was effectively showing as double the width, with the right hand half completely empty.
In fact, I just needed to change the viewport meta tag from:
<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0' />
to:
<meta name='viewport' content='width=device-width, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0' />
Adding the 'initial-scale' locked it down so that it only scrolled vertically as expected.
This will prevent any elements pushing content out:
body div {overflow: hidden ;} # media queries
Try this variant:
html, body{
overflow-x: hidden;
}