I make a website display in ipad2, and everytime I put one finger, hold and drag up or down, all the website also move up and down. Could you please tell me how to disable it, guys?
I have tested with the google.com too, hold the finger, move up and down on the ipad2 face, and all website move up and down, seem every website are the same result.
Any anwser are welcome, I really appreciate
Add the below meta tag to your head
<meta name="viewport" content="user-scalable = no" />
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 very sorry that I'm bothering you with this, but I couldn't find any answers to this search query on Google.
So let me explain my problem really quick.
I've created a webpage that changes between portrait- and landscape mode.
When I use desktop it's perfectly fine, the page displays correctly. When I launch my webpage on my IPhone 5 it does something "weird":
it only partionally displays the page. If I want to see the entire page I need to zoom out, which is quite annoying for users.
So if you guys know how to resolve this problem, please tell me!
Thank you so much for helping me out!
EDIT:
I am using the <meta name="viewport" content="width=device-width, initial-scale=1.0"> tag
For optimizing the css for mobile devices, I used the media query
#media screen and (orientation:portrait) {...}
ANSWER:
This is the cause of my issue: Reset zoom level onload. Sadly, it's not
yet possible to fix this problem... This is the case because I have a
login form on a previous page that links to a new page whenever I log
in. With IOS your browser automatically zooms in at the input, which
when the new page is loaded, still is the zoom level...
Using <meta name="viewport" content="width=300"> should make your webpage automatically zoom all the way out for almost all mobile devices. But make sure that your site is mobile-optimized, otherwise all of your text will become tiny and people will wish that they had zoomed in again.
This is the cause of my issue:
Reset zoom level onload
Sadly, it's not yet possible to fix this problem...
This is the case because I have a login form on a previous page that links to a new page whenever I log in. With IOS your browser automatically zooms in at the input, which when the new page is loaded, still is the zoom level...
So, I created a child theme for an HTML5 blank boilerplate theme. Well, when I go onto the site with my mobile phone, the site is super zoomed in and it does not allow you to zoom out. I am sure it's somewhere in the functions file, if someone can help me find it I would greatly appreciate it!
The site is: www.allcementwork.com
The reason why you can't zoom in or out is because of this line:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0;">
You're setting the maximum scale to 1 and user-scalable to 0, which means the user can't pinch to zoom in/out. Remove this and it should work as intended.
I have a very basic html site I created for my wedding: http://www.johnloveslesley.com/home.htm
I have never tried to create a mobile-adaptive website. I don't feel the need to do so for this, really just a fun little practice project for me.
However, here is my question. When I open the page on my iphone, and zoom in to look at the page - once I've navigated to a NEW page, the browser zooms back out.
Is there a simple code for maintaining the magnified navigation between pages?
Please let me know if I can be more specific with my question.
Thanks!
See mdn.
<meta name="viewport" content="initial-scale=1">
Please disregard AndyM's answer as it tells you a) that you can disabled zoom b) that it's terrible, but he doesn't care, and c) that you shouldn't care either, because people all want the same size of everything, and you shouldn't care about their opinion on zoom level. Disabling zoom seriously hurts UX.
I'm experiencing this weird problem which my scrollbar jumps by itself to somewhere that I don't want it to.
I have a table with scrollbar inside this page, if the user have a smaller screen, the page automatically adds a scrollbar. If I scroll down to the bottom of the table and click on it, the scrollbar of the page jumps up so I can no longer see the thing I clicked. Any ideas?
Thanks.
There are a number of things that can be causing this.
You clicked on a hyperlink with a href of "#", which will cause most browsers to scroll to the top of the page,
There's possibly a CSS :focus or :active rule somewhere being triggered that causes the height of the page to change
There's a javascript onclick event firing and changing the page
...or possibly something else entirely.
Have you tried in different browsers? It could be a bug in the browser itself.
Are you sure the object causing the problem is not an <a href='#'><div onclick='yourJavaScriptFunction()'>...</div></a> or something similar?
Perhaps you have a meta refresh tag
<meta http-equiv="refresh" content="600">
I have seen these cause similar issues on safari, post a link to the page and you will find getting a solution much easier.
My scrollbar jumps when I hit Page Up or Page Down. Also, my laptop trackpad can cause odd mouse behavior if I bounce my thumb against it.
And when I poured a large Latte into my keyboard, I had problems, then. But then the whole computer stopped working about an hour later.