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
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 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'm using Twitter Bootstrap with the responsive CSS for a web-page designed to run in a UIWebView.
I want the page to look the same on all iPhone with the exception of images which should be doubled in resolution for the retina iPhones, but take up the same "real estate".
I have successfully added the following to my style.css to swap in and out the right images:
.normalres { display:block } /* or anything else */
.retinares { display:none }
#media all and (-webkit-min-device-pixel-ratio: 2) {
.normalres { display:none }
.retinares { display:block }
}
I use these in the following context:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content"">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap-responsive-mod.css" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<h5>Why this phone app?</h5>
<img class="pull-right normalres" src="img/iphone.png">
<img class="pull-right retinares" src="img/iphone_retina.png">
<p>Blah Foo Bar</p>
</div>
</div>
</div> <!-- /container -->
</body>
</html>
Where the two images are 150px wide and 300px wide respectively.
However I'm experiencing a problem with the retina iPhone. The correct image is loaded but rather than it being pulled to the right (and the text flowing around it), which happens great on the non-retina iPhone, the image is stretched to the full width of the browser and nothing flows around it. Therefore it looks different to the non-retina version.
I believe this is something to do with Bootstrap thinking the retina iPhone is low res (320x480) like the normal iPhone and then seeing the rather large retina image (320px wide) and getting the layout wrong.
I think I have to tell Bootstrap responsive to treat the retina iPhones like 640px wide devices and not like 320px wide devices, but I don't know which media queries in responsive.css to change and how to change them.
I had a similar issue where I wanted the iPhone browser to render a portait viewport at a higher resolution than the default 320px. The OP appears to be asking this question:
I think I have to tell Bootstrap responsive to treat the retina
iPhones like 640px wide devices and not like 320px wide devices, but I
don't know which media queries in responsive.css to change and how to
change them.
The fix I used was to modify the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=0.8, maximum-scale=1">
I was then able to render at a width of roughly 400px. To achieve 640px, simply make the initial-scale value 0.5. Note this will affect all mobile-like devices, not just retina iphones, so you need to test this with multiple devices.
I used some javascript to see what the iphone window width was via:
$("#screenWidth").text($(window).width());
$(window).resize(function() {
$("#screenWidth").text($(window).width());
});
and adding some HTML to the page:
<div>screen width: <span id="screenWidth"></span>px</div>
Following is head section:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-touch-fullscreen" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="/custom_icon.png"/>
<link rel="apple-touch-startup-image" href="/startup.png">
<script src="http://www.google.com/jsapi"></script>
<script>
window.top.scrollTo(0, 1);
alert('ok');
google.load("jquery", "1.4.1");
google.load("jqueryui", "1.8.0");
</script>
</head>
using iOS 4.2.1
Above is not working for me. Browser Address bar and bottom toolbar are still there. I have tried some tutorials but I am unable to change anything. Any idea?
For iOS 7.1, you can set this in your header to minimize the UI:
<meta name="viewport" content="width=device-width, minimal-ui">
It was introduced in iOS 7.1 beta 2. This site was instrumental in helping me understand how minimal-ui works: http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs
You cannot programmatically hide the toolbar in Mobile Safari.
Your users need to add your web app to their home screens in order for the bars to be hidden when they next launch your app by tapping its icon. This is done by tapping the middle button in the toolbar, then choosing Add to Home Screen. You may need to display a message informing your users to do this.
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%">