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
Related
So I had the problem on mobile described in the following question: Mobile scroll offscreen :
When an object would go offscreen, it seems to increase the total width/height of the website, so the object stays on the screen. I implemented an animation where an css objects leaves the screen and then reenters from the other side.
Following the answer to the mentioned question, I added <meta name="viewport" content="user-scalable=no"> to my HTML file.
That problem is solved, but now it will ignore the ccs code
text-size.adjust: auto;
text-size-adjust: 60%;
, so my layout is now messed up on mobile (before adding the HTML it worked perfectly fine).
Is there any way to prevent the offscreen behavior without blocking the text-size.adjust ability? Hiding the part that is offscreen would help to.
I use Google Chrome (Version 94.0.4606.85) on an Android (Version T810XXU2DRH1/T310DBT2DRH2) Tablet (Samsumb Tab S2 SM-T810)
I'm happy about every helpful answer
Looking into the viewpoint deeper on this website I found out that <meta name="viewport" content="width=device-width, initial-scale=1.0"> will set the width of the viewpoint to the device width (so no offscreen viewpoint, I assume that's possible with height too, but I didn't try) and set the zoom level to 100% when the website is loaded.
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
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.
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
I have a Flex Mobile application that is making use of StageWebView to load a local HTML file.
I have been debugging it on my PC using the inbuilt Emulator (simulating a Galaxy S3 screen, 1280x720, 320dpi) and on my actualy S3.
The app has the StageWebView viewPort set to a rectangle that uses the stageHeight and stageWidth. (1280x720)
On the PC, it displays the HTML file fully (the HTML file has a background image that is 1280x720) and there is no scrolling.
On my phone however, the webview shows the HTML file "zoomed" in (I say zoomed in, but you cannot in fact, zoom out!) and I has to scroll to view all the content. The content appears at twice the size (If i set the background image to 360x640, it fits on the phone screen without scrolling)
Why would the emulator, set to the same resolution and DPI, show the content differently?
More importantly, why is my phone seemingly "zooming" in on the HTML file and making me scroll? The content and phone resolution match, yet StageWebView does not seem to understand.
I found this post, click me, that seems to suggest there is a bug, however the guy mentions his issue is when he doesn't use the viewport meta tag, which I am using!
Does any one know how I can go about fixing my scaling issues and hopefully have my Flex application scale nicely over various devices and have StageWebView display my HTML file correctly?
If you're using meta viewport on android make sure to set target-densitydpi value
<meta name="viewport" content="width=device-width, user-scalable=no, target-densitydpi=device-dpi">
Or if can using css zoom, where zoom value is related to density-independent pixels (DP) value compare to html page size
Check out this article on Adobe
I was banging my head against the wall with the same problem. On the Xoom (Android 3) the local file displayed perfectly, but on the Nexus (Android 4.2.2), the content wasn't displaying correctly with stagewebview.
My solution was to change the href of the css tag. See here:
How to reference local css files in a static webview window in android dev?.
So in my local HTML file, it changed to:
<link rel="stylesheet" href="file:///styles/style.css" type="text/css" />