I am developing a web app and running into a problem on iOS: at the bottom of the page, when I scroll down further, the grey bar with the settings icon is moving up with the rest of the page, even though it's "position: fixed". I need it to stay in place.
This is NOT happening when the page is opened in Safari, only after adding it to the home screen and opening it from there.
I am using the following meta tags:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
The grey bar's CSS looks like this
#bottom-menu {
position: fixed;
bottom: 0;
width: 100%;
height: 50px;
display: flex;
align-items: stretch;
background-color: #222;
}
Related
Hello i have a cordova app and changed from UIWebView to WKWebview and the fixed footer moves when text overflows the view, the footer should work like in the first picture.
have tried everything i have seen, but nothing seems to work
#footer {
position: fixed;
bottom: 0;
background: #ffb81c;
color: white;
width: 100%;
text-align: center;
z-index: 999;
}
pictures
When moving one of our older apps to WKWebview, we found using the cordova-plugin-statusbar plugin in conjunction with adding the viewport-fit=cover attribute to the HTML viewport meta tag resolved our header and footer issues, which had an identical appearance to the example in your screenshot.
Example of the meta tag in the HTML5 <head> section:
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, viewport-fit=cover" />
We also appreciated being able to color match to our app's scheme in config.xml settings for the statusbar plugin, so would recommend use of this plugin anyway to improve the look of a Cordova app.
I am working on an quiz application and I am trying to make it responsive so that it looks good on all devices. The application is an html5 application and is contained in an iframe and set to fill the entire iframe. The native width of the application is 640px and the height is 880px (this is how I calculated the padding-bottom to be 137.5%). It works great on computers and on Android devices but it does not work on iOS devices. Everything I'm reading seems to suggest that I've done it correctly but on the iphone the application is too wide for the screen in portrait mode.
Here is the html code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="iframeresponsive_mobile.css" rel="stylesheet" type="text/css">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Student Quizzes</title>
</head>
<body>
<!--comment: this next section makes a container div for the page with a max width (defined by css)-->
<div class="pagecontainer">
<div class="intrinsic-container"><!--comment: iframe div begins-->
<iframe src="scrolling/index.html">
Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe>
</div><!--comment: iframe div ends-->
<div class="ad"> <!--comment: ad div starts-->
This is an add div...
</div><!--comment: ad div ends-->
</div><!--comment: pagecontainer div ends-->
</body>
</html>
and here is the CSS code:
body {
margin-left: auto;
margin-right: auto;
background-color: black;
}
.intrinsic-container {
position: relative;
clear:both;
height: 0;
overflow: hidden;
/* to get padding-bottom divide the numbers of aspect ratio */
padding-bottom: 137.5%;
z-index: 3;
margin-left: auto;
margin-right: auto;
max-width: 640px;
}
.intrinsic-container iframe {
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
border:0px;
margin:0px;
}
.ad{
background-color:lime;
height:80px;
width:100%
}
/* comment: page formatting make a container to constrain width and center */
.pagecontainer {
margin-left: auto;
margin-right: auto;
max-width: 640px;
}
I have included (to my knowledge) the correct meta viewport tag. Why does this work so well in Android but fails in iOS?
I found that the solution was to add the following code to the canvas element on the page
style="width: 1px; min-width:100%"
I had seen this code on stack overflow before but it didn't work until I added the above css to the canvas. I hope this helps someone with a similar problem.
Brett
I'm making a responsive website.
It is a wordpress website with a modified theme.
The theme has 5 stylesheets: max-479 px, max-767px,min-768px,min1024px
I already tested the website on the ipad and on the Nexus One(Android). And it works great!
However when i test it on an iphone 4S it causes a css bug on mobile safari and google chrome.
The css bug is that when viewing the site the user can still swipe sideways, even though i used the folowing css:
html
{
width:100%;
padding:0;
margin:0;
position:relative;
overflow-x:hidden!important;
}
body
{
padding:0;
margin:0;
max-width:100%;
position:relative;
overflow-x:hidden!important;
}
And i inserted this meta tag in the header.php
<meta name="viewport" content="width=device-width,maximum-scale=1.0">
I checked if divs inside the content were overflowing in any way. But they weren't.
I am totally clueless what is left to do so it doesn't shift when the user swipes horizontally.
Link to the website: http://specialrequesthorns.com/
I appreciate you're help.
-- EDIT
Fixed the problem thanks to #ChrisHerbert and #mrbubbles.
It seemed that the sidebar had an ul that has a width of 120%, setting it to 100% solved the problem!
Regards,
Menno van Muilwijk
Just a guess - have you tried using the full meta?
<meta http-equiv="Content-type" name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no, width=device-width">
I am trying to get the iPad video to display the same as the desktop. I am using media queries redirecting the browser to different stylesheets depending on the browser size. The video css is the same for both desktop and tablet.
On the desktop the user can view a full height and width video in the background, when resizing the browser the video adapts to the browser until the width is 640px then I have changed display: none for the video.
When browsing on the iPad however, the video has a 100& width but the height is not 100% leaving letter boxing. Any help with this.
Other sections or div tags with 100% height works fine. Any comments or help would be much appreciated, thank you (Y)
HTML Header:
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px)" href="styles/index/mobile.css"/>
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 480px)" href="styles/index/600px.css"/>
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 600px)" href="styles/index/tablet.css" />
<link rel="stylesheet" type="text/css" media="only screen and (min-width: 1024px)" href="styles/index/stylesheet.css"/>
Video CSS for desktop and tablet:
#video_background {
display:block;
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
z-index: -1000;
overflow: hidden; }
I don't have an iPad near me, so I can't really test. But I've seen issues like this before (regarding situations where folks need 100% heights).
This would be my best guess:
Add top: 0px; to your #video_background CSS, probably wouldn't hurt to add left: 0px; as well. Essentially, doing this:
#video_background {
display:block;
position: absolute;
top: 0px;
left: 0px;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
z-index: -1000;
overflow: hidden; }
Again, I don't have an iPad with me to test.
Hope this helps!
Good luck
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"/>