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%">
Related
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.
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 adapting a fixed size website (800x600 pixels) to work on mobile phones and I have run in to some problems on the iPhone.
I have set the meta viewport tag with width=800 to fit the page exactly on the screen.
Unfortunately on the iPhone it centers the page on the height giving it an unwanted top-margin. It works fine on Android.
How can I get it to align to the top on iPhone?
Here is a simplified version of the page
<html>
<header>
<meta name="viewport" content="width=800">
</header>
<body>
<div style="width:800px; height: 600px;">
</div>
</body>
</html>
Try this , and it should rescale automatically
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I have a html snippet below which renders perfectly in all browsers. However in webkit on an iphone and ipad, when I pinch the page (so that its smaller), I see a black border which is the background color of the body shining through only on the right edge. This only happens when I specifiy the width of the .headerpic div. Since this is the only place in the document I specify the width, I was wondering why it stops short of rendering all the way to the right edge (since this is theoretically the widest part of the document?).
I've attached a photo of what it looks like from my ipad.
<!doctype html>
<html>
<head>
<style>
body {background-color:#000;color:#231f20;margin:0;}
#wrapper {background-color:#fff;min-height:1000px;}
#header .headerpic {height:102px;padding-top:80px;margin:0 auto;width:986px;}
#footer {color:#fff;}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<div class="headerpic">
</div>
</div>
</div>
<div id="footer">
</div>
</body>
</html>
In my case using:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Instead of:
<meta name="viewport" content="width=device-width">
Did the trick!
It will illustrate your problem a little bit clear: http://jsbin.com/ilenu5/5
What I did:
I Increased the width of the
#headerpic to 1286px
I added a
background color of #headerpic,
which is red
So the your actual problem is: overflow occured
Why?
because you don't set your viewport (width=device-width) and the minimum physical width (in px or cm or em) of body, so your body width by default is 980px, and inherited by #wrapper-- so your 986px #headerpic overflows the #wrapper, and makes your black background appear. Since the overflowed area width is small (986-980=6px), you see a black line.
Making #wrapper position:absolute fixes the problem.
In my case this :
<meta name="viewport" content="width=device-width, initial-scale=1.0">
And :
html, body {min-width:980px; overflow-x: hidden;}
Fixes the problem.
Applying
overflow-x:hidden;
to one of my divs did it
Giving credit to #starkadh for the inspiration.
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