On iPhone IOS 13 and iPadOS, Safari has tappable "AA"on the left of the web address bar.
Tapping it allows the user to enlarge or decrease the text and other element size.
If we decided our website actually looked better at 115% on iPhones and iPads after playing with that AA feature, what would we need to do to our existing CSS and HTML?
We tried the unsupported CSS:
zoom:115%;
on body, HTML and (body, html) but it didn't do anything until it was 120%, and even then the font sizes stayed the same.
What exactly does the iOS AA functionality do technically so we can mimic it? I did ask someone on Medium if that feature was programatically accessable but he said no.
UPDATE 1:
Based on the first comment below, I used:
<meta name="viewport" content="initial-scale=1.15, user-scalable=no, maximum-scale=1.15, viewport-fit=cover" />
and it worked on iOS iPad Safari. I did have to remove:
width=device-width
from that Meta though so the page wasn't too wide. Otherwise a horizontal scroll bar appeared and some content was over the page to the right.
Firefox Windows desktop had no effect for some reason.
And also when I rotated the iPad into Portrait view, the page items actually appeared smaller than when the initial-scale and max-scale was originally set to 1. Maybe 15% smaller. When I rotated it back to landscape the items were 1.15% larger than the orginal (e.g. the Meta tag above seemed to work for that).
FWIW: I think this has something to do with window.devicePixelRatio, at least this is what value changes on desktop browsers (by entering the above in the console) when you use the browsers zoom in/out functionality.
Not sure how to set this value programatically though. Oddly enough, when using the Aa zoom feature on iOS and inspect via Safari > Develop > iPhone on a Mac, entering window.devicePixelRatio always seems to return 2.
This also may be worth looking into if it hasn't been setup correctly: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Related
We have a website that uses "map" and "area" tags. It is generated by saving an Excel spreadsheet to "htm" format, and it is mostly viewed in Safari on iPhones. These tags enable users to click a portion of one page and have it take them to another page.
Recently there seems to have been a change/update that causes Safari to zoom if the clickable area is touched.
Code example:
<map name="MicrosoftOfficeMap3">
<area shape="Rect" coords="0, 0, 150, 117" href="sheet004.htm#Range!A1">
</map>
If you touch the area quickly, it will follow the link. However if your finger stays on the area for a few milliseconds, it will cause the page to zoom awkwardly.
Has anyone experienced this and have you found a way to disable to the zooming? I have tried many things with the viewport and "body" zoom settings in CSS.
Here is a link to a video showing the behavior: https://www.csmckee.com/dashboard_internal/Video.mov
If you are on iOS 13 you may be able to see the behavior in this example - touch the blue square on the frog image: https://www.csmckee.com/dashboard_internal/frog.htm
I think it is a bug introduced in iOS 13, caused by the removal of the 3D Touch code and its replacement by Haptic Toutch.
Notice how the sheets links at the page bottom also get "deattached" from the page and slightly zoomed... That seems to be the behavior for links before opening the preview popup.
HTML map areas are essentially links, so maybe Safari is getting confused and zooming the entire image.
It doesn't help that image maps aren't responsive (Responsive image map), so not sure playing with the viewport meta value can help.
Maybe opening the URL inside an iframe? I noticed small differences on the Haptic Touch behavior in iframe scenarios.
You can prevent Safari from automatically zooming in without disabling the user’s ability to pinch zoom. Just add maximum-scale=1 but leave out the user-scale attribute:
like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
If your website is properly designed for a mobile device you could decide not allow scaling by adding user-scalable=0
I'm having a problem on a web page where an orientation change (landscape to portrait, or portrait to landscape) causes the window to display incorrectly:
The display reorients, correctly for a brief instance, and then an incorrectly scaled column appears on the left hand side. The incorrectly scaled portion of the window is part of the pre-rotated page (oriented correctly).
Reloading the page fixes the problem (until the next orientation change).
At the moment, I only have an iPad mini 7.0.3 to test on.
For tablets, there is no orientation change function, and this displays fine on Android tablets.
I can't find anything online about this... is it a known bug?
The viewport meta looks like:
<meta name='viewport' content='width=device-width, width=device-width, height=device-height, user-scalable=yes'>
------------------------ update: ------------------------
I whittled down the page, and the results are:
1. I have included some fonts from http://openfontlibrary.org
2. I have a <ul> on the page
If I remove either of these, the problem goes away! (probably something other than <ul> will cause this as well, since at least one of the pages shows the problem without this tag).
Will research further... it would be a shame if I couldn't embed fonts!
you can try adding this to your body tag:
onresize="location.reload()"
this should reload the page when the vieuwport changes.
My client has reported a stange issue with his website. URL of the web-site is your-montenegro.me
A stange white space appears at the bottom of the page when it's loaded on Android-based browser. Here are the screenshots:
Huawei Ascend, Android 4.3: http://i60.tinypic.com/90vuyw.png
HTC Desire S: http://i61.tinypic.com/2pyayk1.jpg
When I try to open this web-site:
Windows Phone 8.1 IE10: No white-space
Any Windows/Linux-based browser: No white-space
Do you have any idea what to try?
I have tried playing view browser viewports but wasn't able to come with a solution.
Edit:
Also, when I load this page on Huawei Ascend first time, site appears a bit zoomed in (which is totally fine/expected), but scrolling down still reveals the white-space.
Edit2 (screenshots):
Huawei Ascend:
HTC Desire S
I tested the site using the viewport below and it appears to fix the issue.
<meta name="viewport" content="width=device-width, user-scalable=yes">
The problem is because most mobile devices have a pixelRatio of 2. This causes your forced height of 960px to become 1920px because the mobile browsers believes that's what you meant. Since your background isn't 960px you get all the white space.
I only tested this using the Chrome Emulator which you can learn more about at https://developer.chrome.com/devtools/docs/mobile-emulation which lets you emulate a ton of mobile devices easily.
I'm making a prototype sight currently that is static (as in when the screen is resized smaller such as 480 pixels the sight does not responsively adjust its elements ). I actually don't want the sight to be responsive I want it to behave as apple.com does. Apples site is a large zoomed out overview of the site allowing the user to zoom in on what he/she wishes to. Whenever my sight is loaded on my iphone it is zoomed in to a tip corner of the site. When I apply zoom:.5 to the css it zooms out just as much as i would like it to in IE and chrome but does not in Firefox. Obviously that's a major problem being firefox is a very popular browser and i am having difficulties finding an alternative. If any one could offer any amount of alternatives (even using javascript) it would be much appreciated.
If I understand you correctly, you need to set the viewport meta.
Add the following to the head section of your site:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
This will set the initial zoom to fit the entire page, while allowing users to zoom as they please.
this is quite easy...
just do all your code in old fashioned pixel measurements
and nothing will resize and it wont be responsive at all
This question already has answers here:
Android viewport setting "user-scalable=no" breaks width / zoom level of viewport
(3 answers)
Closed 8 years ago.
I'm having some problems getting my website to scale correctly for mobile devices.
We have a site that's designed to be a minimum width of 640px, maximum of whatever. I have the meta tag currently:
<meta name="viewport" content="width=device-width;minimum-scale=0.5,maximum-scale=1.0; user-scalable=1;" />
Now - The part i'm confused about is that if I use "initial-scale=1.0", obviously the site will scale 1:1, and it will look crappy on an iphone 3Gs (will only see half the site). Now, on an Iphone 4, (having a 640px wide resolution) it will be scaled properly at 640px if I use "initial-scale=1.0".
Alternately, if the graphics are 480px, 3Gs would require scale=.667 and iOS 4 would require 1.3, correct?
So how do you get the site to fit perfectly edge to edge? Can the browser detect the device width and then set the scale accordingly?? There are lots of different device widths out there... android, older iphones, blackberry's etc.
Getting quite frusterated :( Feel like i'm missing something important that I should already know.
Edit It seems that the 'initial-scale' meta tag should be scaling the site relative to the viewport, then using width=device-width to set the actual viewport size.
The problem I seem to be having is that the viewport isn't scaling to fit the device, it's staying at 640px no matter what tag I use. What am I missing here???
I think the main issue with the original message is that semi-colons don't appear to work on iPhone 4+. It only works with commas as separators (or only the device-width setting). Other browsers seem to be more tolerant.
The following works reliably for me:
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1" />
You'll also want to disable the body and document from scrolling horizontally:
body, html
{
overflow-x: hidden;
}
Good link for more info on Mozilla Site:
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
"width" is to tell the browser how wide your website is at 100% zoom. if you have designed your website to be fluid, you could specify "device-width" here, and the browser won't need to use any zooming, as your layout is designed to fit any viewport width.
"initial-scale" is for overriding the default behaviour of some devices to zoom in or out on your website so that the website width (which you specified above) matches the screen width. setting this to 1 basically says "don't zoom for this, use scroll bars if my website is too wide for the screen, and leave blank space at the sides if it's too narrow". if you do want your website to fill the screen width exactly, don't use initial-scale.
Ok, i've figured it out... essentially.
Because my design is actually 2x the size of the viewport (sort of), the key is just to use "initial scale = 0.5". It works correctly on both devices (3Gs and 4), and more or less correctly on android devices, etc.
Kind of tricky, and it seems like there should be a better way to do this, but for the time being, it works.
Thanks all who provided input.
I believe that the answer is that you want to tell the web browser to always scale the site to 640 pixels. I would even turn off the ability for users to scale the site so that stray drags don't re-size everything.
Try this:
<meta name="viewport" content="width=640; user-scalable=no;" />