I made a very simple site www.abasi.info/viewport
Consists out of:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<p><img alt="18" src="18.gif" style="height:55px; width:550px;"></p>
</body>
</html>
The numbers should go until 18. But with my Android Phone (Version 2.3.6) the viewport doesn't adjust. It is zoomed in to much. I just had this one picture in the site (nothing else). And if the above viewport would work it would show all the numbers in the pictures until 18. It is very strange.
You need to make the Image 100% width and auto height, so the ratio won't mess up.
example -
img{
width:100%;
height:auto;
}
http://jsfiddle.net/1n9jnaxw/
you also can use max-width, but make sure you define the image dimensions first.
To limit the viewport to 550px you will have to change it to-
<meta name="viewport" content="width=550, maximum-scale=1, user-scalable=no">
Related
When I display certain images (specifically those with a larger height than width), they are flipped horizontally (90deg). Is this a bug in HTML?
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>This is my code</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<img width="500px" src="testpicture.jpg">
</body>
</html>
Probably it flips not the image itself but the page as a whole due to the viewport setting. You can check that by adding text and watching whether the whole page turns 90 degrees.
I have the following blank HTML template:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
</body>
</html>
When I run this via localhost inside iOS Simulator Safari, I get this:
Notice the scrollbars, which hopefully indicate how much wider and taller the page is than the viewport. This is despite my meta tag placed in the head.
The same cannot be said for desktop Safari, only when run on mobile Safari like this.
Why is this so wide and tall by default, and how do I ensure it's no larger than the viewport by default, without adding a bunch of CSS?
I've a website that I'm building which is 700px width on desktops and mobile. On the desktop the 700px div is centred. On mobile the 700px div just needs to fill the screen.
Test code below
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<meta name="viewport" content="width=700" />
<style>
div#wrapper
{
width:700px;
margin-left:auto;
margin-right:auto;
}
</style>
</head>
<body>
<div id="wrapper">
<img src="/test.jpg" alt="Test image 700px width in 100px strips" />
</div>
</body>
</html>
This works fine across desktop browsers and most mobile phones. However on my daughters cheapo smartphone the browser zooms right in and only displays about 350px.
How should I approach this issue. You would think that it would be an easy situation to resolve but it's proving not too be! Messing about with the other meta tag attributes (initial zoom etc) has no effect on this particular smartphone.
The Huawei phones browser is Agent: Modzilla/5.0(Linux; U; Andriod 4.2.2;en-gb;HUAWEI Y330-U01 Build/HuaweiY330-U01)AppleWebKit/534.30(KHTML, likeGecko)Version/4.0 Mobile Safari/534.30
Use this
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Explanation:
A <meta> viewport element gives the browser instructions on how to control the page's dimensions and scaling.
The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:
Demo
Without view port
With view port
Read this - https://css-tricks.com/snippets/html/responsive-meta-tag/ and this http://www.w3schools.com/css/css_rwd_viewport.asp
I don't have an Android device to verify this, but perhaps this would be solved with a relative width and a maximum width:
<style type="text/css">
div#wrapper
{
width:100%;
max-width:700px;
margin-left:auto;
margin-right:auto;
}
</style>
max-width overrides width when its conditions are met, so a smaller display like that on your daughter's phone should use a full width while a larger display would only be 700 pixels wide.
(I added the type attribute to your <style> tag for completeness. Your code should render just fine without it.)
Try this, hope it will solve your problem
<meta name="viewport" content="width=device-width"/>
instead of
<meta name="viewport" content="width=700" />
I would set your CSS width to 100%, not 700px. It's generally best to avoid hardcoding dimensions when possible. Also as suggested by another answer, max-width could be useful as it overrides width when specified.
You could then use screen size media queries(https://css-tricks.com/snippets/css/media-queries-for-standard-devices/) to put a border div around the image on large displays.
Add the below link inside the head tag
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Style Sheet
<style type="text/css">
#media only screen and (max-width: 699px)//media query for the resolution below 700px {
div#wrapper
{
width:100%;// this will took full width
}
}
</style>
Consider the following rudimentary html code block:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>iPad test</title>
<meta name="viewport" content="width=device-width">
<style>
body
{
margin:0;
}
#content
{
margin: 0 auto;
width: 980px;
border:1px solid #c4c4c4;
background-color:#f5f5f5;
}
</style>
</head>
<body>
<div id="content">
A small amount of content
</div>
</body>
</html>
When viewed on an iPad, the main content area of 980px will not be auto zoomed to fit the iPad screen. However, if you replace A small amount of content with a large amount of content, ie... enough to cause vertical scrolling, the page is auto zoomed on the iPad.
Does anyone know why this is? I have been searching high and low and can't seem to find a way to force the auto zooming to occur when there is minimal content on the page.
Changing the viewport content to width=980 fixes the issue of course, however I am creating a responsive website, therefore the viewport needs to be device-width.
I am using a media query to alter the CSS for the content area on smart phones (to 100% width), and I was hoping to use the standard desktop version of the website for iPads.
Any ideas would be much appreciated.
Note: I am testing on an iPad with retina display, I'm not sure what happens on older models.
After a break from this, I came back with a different angle - if setting the viewport width to a specific value fixes my issue for the iPad, why not do just that.
So the solution for me was to default the viewport width to device-width to handle smart phone devices, then detect for iPads and adjust the viewport width:
<meta name="viewport" content="width=device-width">
<script type="text/javascript">
if(navigator.userAgent.match(/iPad/i)) {
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=980');
}
</script>
Thanks for your suggestions insertusernamehere
Try this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The whole content will fit afterwards.
I have coded a html page as follows:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
</head>
<body bgcolor="#f2f2f2">
<div style="width:1000px;height:auto;margin:0px auto;" ><!-- main container -->
<div style="width:1000px;height:50px;margin:0px auto; background-color:pink;" ><!-- container 2 -->
Hello world
</div> <!-- end container 2 -->
</div> <!-- end main container -->
</body>
</html>
The width of the div is 1000px and it is center aligned using the property margin:0px auto;
When I view this in the desktop browser, it is fine. But in a mobile browser(iPhone Safari), I get an unwanted horizontal scroll, also the entire page floats hrizontally and diagonally.
Why does this happen?
How can I fix this issue which is specific to iPhone/iPad browser. I have not tested in other mobiles.
What are the code I need to put in to make a mobile browser display a webpage(designed for desktop browser) properly?
Please suggest.
Thanks
Thank you for the suggestions provided.
A slight modification solved the issue.
<meta name="viewport" content="width=1000" />
This worked.
Try to add this line to head section:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="viewport" content="width=1000, initial-scale=1" />
Try the above, instead. The content width is set to match that of the container div, and the max scale is removed to allow users to zoom in.