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">
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 have an iframe that I am embedding into a responsive WordPress theme. It looks good on some mobile devices, but on iPhone, the iframe is a bit wider than it should and it gets out of the container so users can't see the right part of the iframe (which is probably around 20-30px). This happens on portrait mode - if the orientation is set on landscape, it looks ok.
The content of the iframe is responsive as well, I'm using bootstrap. Also it looks ok on resized desktop browsers and on Android mobile devices. So the problem is only with the portrait iPhone orientation.
I am using this in the head of my iframe:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Any ideas?
Thank you!
Mobile Safari seems to not recognize width attributes on iframe, but recognizes min-width.
iframe{
width: 1px;
min-width: 100%;
}
The problem is that mobile Safari ignores the iframe width attribute. I created a new question here and answered it myself with the solution: How to set the width of an iframe in iOS6?
For the meta tag try starting with:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If that doesn't solve it, look for what's causing the frame to be too wide, e.g. iframe dimension settings, width, padding or margins of elements inside the iframe, as well as margins or padding on the WordPress div that contains the iframe.
Remember that the iframe content is a completely seperate document so you need to double check details in both the parent WordPress page and the iframe page.
Good luck!
edit
You could also check it's not a default browser setting by using a reset in your WordPress CSS, e.g.
iframe{
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
}
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;
}
I changed this site over to html5 using the html5 boilerplate. Everything looks fine when viewed on a desktop or even an ipad but when I view it on my iphone it zooms in only showing the contents of my .wrapper div. I've tried removing the
as many have suggested. I also tried adding maximum-scale-1.0, initial-scale=1.0, and minimum-scale=1.0 and none of these or combinations of them have solved the problem. I also tried setting my body and html tags to width:100% with no luck. I can't seem to figure out what the problem is and if it's a css or meta tag problem. The site is located at www.sweetestgourmet.com.
Try adding this to <head>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
use css3 media queries
include meta tag as show in the head tag
then in stylesheet taget iphone as
#media only screen and (max-width: 480px){
/* write your css */
}
here is tutorial http://css-tricks.com/css-media-queries/
I have used a fixed footer in one my HTML5 web-app. It works fine on IE10 phone browser, but when I try it out on WP8 Emulator using web-view
mainBrowser.Navigate(new URi("http://jqtouch.rediffmailpro.com/iScroll/win8Example1.html",URiKind.Absolute));
It leaves a gap at the bottom.
I read it somewhere, and edited the meta tag to include the height.
<meta name="viewport" content="width=device-width, height=541 initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
The gap is gone. But, I don't think this will a good idea because on orientation change the footer is lost, as height remains 541. I don't want to hard-code the height anywhere, since multiple devices might have different height.
It seems the view-port height is not correctly set for css. I am using bottom:0; position:absolute; to fix the footer. I have tried position:fixed too.
Here is the reference link: WP8 Scroll Demo
Please help.
Use iscroll4 and use few media queries in css:
#media screen and (orientation: portrait) {
#-ms-viewport {
width: 320px;
user-zoom: fixed;
max-zoom: 1;
min-zoom: 1;
}
}
#media screen and (orientation: landscape) {
#-ms-viewport {
width: 480px;
user-zoom: fixed;
max-zoom: 1;
min-zoom: 1;
}
}
This works fine on Windows Mobile 8 Phones. Here is a demo: http://jqtouch.rediffmailpro.com/iScroll/win8Example.html