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.
Related
On Safari on Ipad the white X appears on the right hand part of the black. This is the only Safari I have though so unsure if iPad issue or Safari issue or my issue.
https://jsfiddle.net/juvpxa8q/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<title>title</title>
</head>
<body>
<div id="main">
<div id="piece-info-container">
<div id="piece-info">
<div id="piece-info-top">
<div class="piece-info-row">
<i id="close-piece-info" class="fa fa-window-close unselectable" aria-hidden="true">X</i>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Add position: relative to #piece-info-container.
It has to do with the resetting of the children's positions.
To be honest, it'd be best to rethink your CSS from the ground up because position:absolute inside of a sticky inside of a fixed is a recipe for trouble.
It's quite common to be wanting to position icons in the top right corner... A good place to start could be taking a look at Bootstrap's modals. Look at the .modal-header separation and using float to position the x it to the right.
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'm writing my first website using Bootstrap and CSS style sheets with VS2015 and it all lines up perfectly when in full max screen. However, when I start to reduce the size of the screen, instead of the scroll bars taking over, the components move and eventually all fall out of line.
Below is how I have set out my html screen
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Strict//EN">
<html lang="en">
<head>
<title></title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!--Bootstrap-->
<link rel="stylesheet" href="Content/bootstrap.css" />
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="StyleSheet1.css" />
</head>
How can I set my components to fixed and just allow the scrolling whatever size of the browser?
I have spent quite a bit of time browsing on this and I've experimented with #media and other CSS changes but nothing works.
If I understand correctly, you are looking for this (which I don't recommend):
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
Here is an article: http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design
You can also try placing min-width onto your outermost container, like this:
#your-main-page-wrapper-around-everything { min-width: 1200px; }
Bootstrap CSS is intended to be responsive, so your other option is to study their grid css: http://getbootstrap.com/css/#grid
This would give you control over how the columns will wrap, so you won't have to prevent user scaling.
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">