The resolution of my iPad 8 is 2160x1620. When I build a website with a div that is 1000 pixels wide, that div is nearly 90% wide on my iPad's screen. That is not what I expected.
On my iMac (full HD) the div is displayed with the correct width. How can I solve this?
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div style="width: 1000px; background-color: aqua; height: 10px"></div>
</body>
</html>
Try setting this in the <head> portion of your page:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This should make your document scale correctly with your device's screen resolution.
You can read more about how it works on W3Schools.
Related
When change orientation of iOS device the contents of Webview don't always adjust to new orientation. It cuts off to what seems to be width of the space that it occupied in previous orientation. Screenshot below
On orientation change I call orientationchange event
evalJavascript("var e= document.createEvent('Events');" +
"e.initEvent('orientationchange',true, false); document.dispatchEvent(e)");
In HTML I have viewport meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, user-scalable=1" />
What's interesting is that this does not happen to other pages like New York Times home page, which I load locally. Any ideas what could be the issue?
Put this HTML code into your website header:
<meta name="viewport" content="initial-scale=1, maximum-scale=1, width=device- width, height=device-height">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
This should ensure that your website is app/mobile accessible.
I'm loading a simple html string into a WKWebView and my objective is to have a full screen image in that webview.
The problem is that the image seems to be scaled twice as big as expected.
I simply load the WKWebView using
NSString *html = #"..." // the content
[self.webView loadHTMLString:html baseURL:[[NSBundle mainBundle] bundleURL]];
I'm expecting the image to be full screen and fit the screen
But I get an image that seems to be twice as big as the screen resolution (not the text at the bottom left(
I tried playing with using the initial-scale and maximum-scale
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
But it does not work.
Also not that this seems to happen only for images that are base64 encoded in the HTML but this is something I need.
The HTML is
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width"/>
</head>
<img src="data:image/png;base64, ...">
<!-- <img src="http://placehold.it/750x1334"> -->
</body>
</html>
Here is the html complete HTML
I added and it is working.
The HTML is:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
<style>
img {
width:auto;
height:auto;
max-width:100%;
max-height:90vh;
}
</style>
</head>
<body>
<!-- body container -->
</body>
</html>
When I view the following html file with Safari in an iphone, it does not display the entire width of the content as it's supposed to:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>iOS Viewport Test</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<style type="text/css">
body #wrap {
width: 1008px;
border: 1px solid #000;
}
h1 {
font:30px sans-serif;
}
</style>
</head>
<body>
<div id="wrap">
<h1>Here's some quite eloooongated text that should make the screen at least 1008px wide or more</h1>
</div><!-- end #wrap -->
</body>
</html>
Can anyone see what I'm doing wrong? For what it's worth, I have iOS 6.1 and Safari 6.0
Even though I read apple's various viewport guidelines very carefully, apparently I misunderstood. If a site is non-responsive, like mine, the correct meta in this case is
<meta name="viewport" content="width=1008"/>
This makes the viewport fit the content in both portrait & landscape orientation. There's a discussion of this approach here: http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design
I was googling to see if anyone else had encountered this issue as well. Thought I'd share my results.
My non-responsive site is about 1200px wide, and I wanted it to show the whole site's width while in portrait mode. Setting the scale to 0 also seems to work on what I've tested:
<meta name="viewport" content="width=device-width, initial-scale=0"/>
I have a site that is 2048px wide. Is there a way to automatically have the iPad fit the entire site width on the screen when the site is loaded? I've tried experimenting with meta viewport in a few different ways:
<meta name="viewport" content="width=device-width maximum-scale=1.0">
<meta name="viewport" content="width=device-width initial-scale=1.0">
This hasn't worked though. The site is still too wide and spills off screen on the iPad.
You can pass a fixed size to the content width like so:
<meta name="viewport" content="width=2048" />
May need some tweaking to allow for padding either side, but should load the site at that size and allow users to zoom in.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
That's what I use for my website.
The correct way to fix this problem are by using percentages rather than fixed widths. But if you "cannot" change that, you can force your viewport to scale down by using 0.x in initial-scale like:
<meta name="viewport" content="width=device-width, initial-scale=0.625, user-scalable=yes" />
Try setting min-width: 2048px; to the html and body tags in css. That's fixed some weirdness on iPads for me before, but not sure if it will apply to this one.
I was working on a site with the same problem recently, it wouldn't stay zoomed out between page clicks for a fixed 960px width site. Try:
<meta name="viewport" content="width=device-width, initial-scale=-100%" />
So far so good, passed on my Ipad Air.
This works fine:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
I've upgraded from jQuery Mobile a3 to b1, (Mainly because a3 didn't work with WP7 devices) and now it's not scaling correctly on any of my devices (iPhone 4, Droid X, HTC Surround - WP7). Any idea's as to what's causing this? I'm not using any custom css or anything else special... (I was previously, but I've since removed it all in attempt to find out what was causing the issue)
It does re-size with chrome when I re-size the window. I've tried clearing the cache/cookies/history/everything on the phones.
http://us.parkmobile.com/mobile/
Your not setting the viewpoint meta tag
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
http://jquerymobile.com/demos/1.0b1/ (right click to view source)
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
This is what I use :-)