I have been researching for a few days now and I have not been able to come up with a solution to my problem.
Now, for a mobile screen break I have decided to use (min-width: 320px) and (max-width: 640px). On the desktop browsers (chrome, firefox, IE8, Safari); however, when I put the files on the server and try to bring the site up on my iPhone 4s, the screen breaks do not work and all my background images disappear.
Here is my desktop css (there are seven sections, but I am going to list two, because each section is identical - except for the background picture):
#home{width: 100%;
height: 1080px;
background: url(../images/landingPage.jpg) no-repeat fixed;
margin: 0 auto;}
#about{width: 100%;
height: 1080px;
background: url(../images/about.jpg) 50% 0 no-repeat fixed;
margin: 0 auto;}
Here is the css for the media screen breaks:
#media only screen and (min-width: 320px) and (max-width: 640px){
#home{background-image: url(../images/landingPageMobile.jpg);}
#about{background-image: url(../images/aboutMobile.png);}
}
Does anyone have any suggestions on a fix or if I am doing something wrong?
u need this...
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
Related
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;
}
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">
Why does this jsfiddle page appear so far zoomed out when viewed on Mobile Safari on iOS 6.1? I'd expect it to take up the entire width, but it zooms way out instead. I have pretty boring CSS as follows, but I'm missing something.
.foo {
overflow: auto;
overflow-y: hidden;
height: 100px;
-webkit-overflow-scrolling: touch;
white-space: nowrap;
}
.foo ul li {
display: inline-block;
border: 1px blue solid;
max-width: 100px;
overflow: auto;
white-space: normal;
}
Add
<meta name="viewport" content="initial-scale=1.0,width=device-width" />
inside the <head>
Working example (standalone)
Working example (jsfiddle)
Background: By default, mobile Safari displays pages with a canvas width of 980px (see this answer), the 'width' parameter overrides this and 'device-width' automatically sets it to whatever size (or portrait/landscape orientation) you're using. It was initially introduced by Apple but pretty much everything now supports it.
For this to work in jsFiddle, you need to add the meta tag to the CSS pane but wrap it in a </style> / <style type="text/css"> tags so it appears in the head. Also, the ordinary embed sharing link won't work, as everything is wrapped in an iframe, so you need to break out the contents of that directly: .../show/light/
(If you have a Mac, the iOS Simulator is handy for this kind of thing - requires installing XCode. Also Chrome Dev Tools > Settings (cog icon, bottom right) > Overrides > Device Metrics)
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