Is there a way to enable touch support in the Microsoft Edge browser, similar to Google's Chrome browser?
Currently, if I pinch to zoom the entire page is zoomed in Edge, whereas only the model is zoomed in Chrome.
Make sure to specify "user-scalable=no" as meta-tag in your html page head section. That should fix it, otherwise that an Edge issue for the MS guys I would say ...
<head>
<meta name="viewport" content="width=device-width, height=device-height, minimal-ui, minimum-scale=1.0, initial-scale=1, user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<title>"Viewer"</title>
<meta charset="utf-8">
</head>
I was able to improve the behavior of pinch/zoom on touch screen with Edge using this css:
html .adsk-viewing-viewer{
-ms-content-zooming: none; /* Disables zooming */
touch-action: none;
}
from the answer: Disable all page-zooming in IE11 on Windows8-Arm
The viewer pivots with finger gestures, but unfortunately doesn't zoom. At least the entire page no longer zooms.
Related
I've developing a store on eBay and having trouble with it on iPhones...
It seems to be nicely responsive in a normal browser, but when I view it on an iPhone it only takes up about half of the screen...
Is there something I'm missing?
The URL is http://stores.ebay.co.uk/the-biggest-toy-store
I've added a viewport tag like this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Thanks!
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
in your index.html page and it should work
A few things I noticed in your site, remove the min-width: 760px from your .stBadge (in your media query only). That will help get the footer within the screen boundary. There is also some kind of border up top that has a wider-than-screen width, possible the #gh-top div... but that may be fixed once the other is.
I am working on a webpage at work and I am facing an issue that my webpage can be dragged to left when viewing on a mobile device.
I do have this meta tag on my website
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
However this does not fix the issue.
Unfortunately due to company policies I cannot share the code here.
I have checked that nothing is overflowing.
I also have the overflow-x set to hidden on my body tag.
The user is unable to scroll (No scrollbars appear) but he is able to drag the page to the left and zoom-out.
Try to change , to ; in:
"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"
I am using jQuery mobile in its simplest form.
Just added a page with a header content and footer
in the content I've added many test to get a scroller
The divs seem to be as wide as the word 'test', therfore the scroller only applys to a very small portion of the width of the screen.
When I try to scroll outside of the word 'test' the whole page is moving, without actually scrolling the content area.
I've added the following meta ta g to the head section:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no;" />
it didn't do anything.
Any ideas?
Try putting:
<div data-role="content" data-theme="c" style="width: 100%">
Old trick with window.scrollTo(0,1); doesn't work. And even worse, the address bar moves only a bit and gets stuck halfway out sometimes.
It is a combination of many things as I have found when researching this issue for myself.
Here's the code that properly works on iOS5:
(I know I'm a little late, but an answer is an answer, hopefully it can help people in the future)
<!DOCTYPE html>
<html>
<head>
<title>Hide Address Bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 0);
}, 0);
});
</script>
<style>
body { min-height: 480px; }
</style>
</head>
<body>
<h1>Content</h1>
</body>
</html>
Source: http://24ways.org/2011/raising-the-bar-on-mobile
Example: http://jsbin.com/isenax/
i guess the code should still work..
anyways here is the correct way to tell mobile safari that you want the full screen:
click me
e.g. use
<meta name="apple-mobile-web-app-capable" content="yes" />
EDIT
Apple uses a new mobile-ui property to display a minimal UI in safari:
A property, minimal-ui, has been added for the viewport meta tag key that allows minimizing the top and bottom bars on the iPhone as the page loads. While on a page using minimal-ui, tapping the top bar brings the bars back. Tapping back in the content dismisses them again.
use it like this:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
source: https://www.perpetual-beta.org/weblog/ios-7-dot-1-mobile-safari-minimal-ui.html
Since IOS7 the window.scrollTo trick doesn't work anymore. There is no work around for the moment except to invite the user to add your website to Home Screen.
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
Is it possible to hide the address bar in iOS 7 Safari?
Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch
On iOS 7 you can use the minimal-ui meta tag. Unfortunately, that was removed in iOS 8.
For iOS 8 there's a project called brim that is supposed to bring back the minimal-ui type functionality. It can be found here: https://github.com/gajus/brim
The following code does not fit onto the iphone screen;
how do I have to define the viewport?
<html>
<body>
<center>
<div id="karteu" style="background: url('../customer/Karten/karte1.jpg') no-repeat left center;width:714px;height:540px;" >
</div>
</body>
</html>
Normally the site should be zoomed, so i first should see the website in small, and then be able to zoom that i see it in the original size, but in my case it does not, when i call the site, the zoom is, that the image has this original size already, and that i have to scroll, but i dont want to scroll,...i want to use the normal safari mobile zoom and then scroll
The solution at the bottom does not zoom anything.
I want to see the overview of the image at the beginning.
Then i want to be able to zoom with the normal safari zoom functions,..
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
use the following meta tag:
<meta name="viewport" content="width=*your site width*, initial-scale=0.30">
works for both tablet and mobile