I have a website which has elements outside the viewport, which I use for animations, they basically kick in , every time you scroll to a different section of the page.
The problem is you can scroll horizontally thus taking the website's content out of the viewport and having access to the element which shouldn't be seen (something like an element with {right:-660px;} which should be well out of sight till it's supposed to come into the viewport{right:100px} or something).
Have already tried
<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
And
body,html{overflow-x:hidden!important}
I'm sure this is a problem which might have many losing sleep over, just like me.
Any help would be hugely appreciated.
As Mac's and on iOS, overflow-x:hidden on the body isn't as forgiving as it is on PCs. If you must have an element that has to appear offscreen, put it in a div that is not wider than the screen and has overflow:hidden on it.
E.g.
.overflow-div { max-width: 100%; position: relative; overflow: hidden; }
.my-animatable-element { position: absolute; right: -660px; }
<body>
<div class="overflow-div">
<div class="my-animatable-element"></div>
</div>
</body>
A link, or code, would really go a long way in helping you solve your problem.
Note: max-width:100% isn't necessary in my simplified example, but it might be in your specific case, which is why I put it in.
<meta name="viewport" content="width=device-width; initial-scale = 1.0; maximum-scale=1.0; user-scalable=no" />
<style type="text/css">
body {
overflow-x:hidden;
}
I had the same problem.
This is what worked for me:
div {
overflow:hidden;
}
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'm having an issue with my background stressing on iOS devices. It is stretching only when I have added content to a page like this. It loads correctly on empty pages like this. I read it has something to do with the adding background-attachment:scroll instead of background-size: cover. When adding it to the css, I don't get any changes. I must be using the wrong content id. Before I make a more images for a mobile theme, I'm wondering is it anyway I can fix it with code? Any help would be greatly appreciated.
The parallax effect was based on the notion that background images would remain in place with a fixed position while stretching to fit its container. Unfortunately CSS alone won’t let it happen.
Once you set an element to fixed positioning it is essentially removed from the DOM and relative to the window
section
{
position: fixed;
top: 0;
bottom: -72px;
background-image: url(http://bgImage);
background-size: cover;
background-attachment: fixed;
}
Try adding this code inside your html head tags:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">
When I add audio tag to html and try to see it on IPhone 5 it has only half the size. How do I fix it?
<!DOCTYPE html>
<html>
<body>
<audio id="audio" preload="auto" tabindex="0" controls="controls" type="audio/mpeg">
<source type="audio/mp3" src="someSource.mp3">
</audio>
</body>
</html>
If I zoom in then it works. But not in the normal screen.
Wrong:
Expected:
If I add
<meta name="viewport" content="width=device-width, initial-scale=1">
It would also show up properly but would become half height once zoomed out.
Also flipping screen horizontally makes it a little bit higher.
EDIT screen after #Romain suggestion:
You only need to expand your tag to full width of your container and adjust a minimum height that will suit all browsers
html
<!DOCTYPE html>
<html>
<body>
<div id="block"></div>
<audio id="audio" preload="auto" tabindex="0" controls="controls" type="audio/mpeg">
<source type="audio/mp3" src="someSource.mp3">
</audio>
</body>
</html>
CSS
audio {
width:100% !important;
min-height: 30px;
display:block;
}
#block {
height:100px;
width: 50px;
background: blue;
}
The issue is your audio tag is floating on the left (not big enough) and it is displayed under a web browser bar.
Here, I don't think the audio tag is the problem. Try to had another html element to review if the tag is well displayed.
I also had to set height:100px; on audio to get full play arrow height to show. It did move the control down in other browsers but I can live with a little white space above the control. Add this to css or to head of the page:
<style>
audio {height:100px;}
</style>
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">
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"/>