I have a bootstrap responsive design working well on a wide range of browsers, but the page width is limited on iPhone. I have already added the viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
And it does not seem to help. The site is here: http://themenuengine.com. Any advice would be much appreciated!
Around line 780 of bootstrap-responsive.css:
#media (max-width: 767px) {
body {
padding-right: 20px;
padding-left: 20px;
}
Override that padding with 0 and it will be full-width.
For example:
#media (max-width: 767px) {
body {
padding-right: 0 !important;
padding-left: 0 !important;
}
}
Related
I am having trouble with my css media queries. They work great on the computer but don't work on my iPhone. Here is what i have:
#media only screen and (max-width: 400px) {
.logInCenter{
width:90%;
left:0;
top:0;
margin-left:0px !important;
}
}
#media only screen and (min-width: 401px) and (max-width: 768px) {
.fluid-half
{
display:block;
padding:20px 0px;
width:100%;
float:none;
}
}
#media only screen and (min-width: 769px) and (max-width: 991px) {
}
#media only screen and (min-width: 992px) and (max-width: 1199px) {
}
#media only screen and (min-width: 1200px) {
}
The problem is that my iPhone only detects the styles when I put them in the third media query. The issue is that at 100% width, it looks just like any other desktop site. Really far away. I hope that makes sense! thanks!
Have you made sure that the following code is in your HTMl head? Tells the devise to look at viewport sizes.
<meta name="viewport" content="width=device-width">
Since you are using css media queries, you should not use meta tag in your html file.
You can set the same in css using:
#viewport {
width: device-width;
zoom:1;
}
it works fine on desktop & android... but not on mobile?
css:
display:block;
position:absolute;
bottom:0px;
width:94%;
padding:15px 3% 0px 3%;
height:185px;
z-index:10;
background-color:#ffffff;
border-top: 1px solid #c9cfdd;
margin:0;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
-webkit-transition-duration: .25s;
transition-duration: .25s;
the div isn't in a wrapper or anything as it sits over the top of the content. In iPhone it sits about 50px off the bottom?
EDIT:
position: fixed works, but why not position:absolute? I need position:absolute to work for other reasons...
You can try by adding this meta tag
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
I am working on building a site for responsive design.
I have a certain CSS style as follows:
/* when viewport height less than 320px */
#media screen and (max-height: 319px) { /* TRIED FOR IPHONE -- CAN'T GET TO WORK YET */
#footer {
font-size: 65%;
line-height: 110%;
margin-top: 12px;
}
}
I tested it on my iPhone in landscape mode and the font-size does not change to 65%, nor do any of these 3 styles take effect. Is this a valid and proper way to detect the screen height dimension for an iPhone?
Could you try using a different media query?
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
#media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}
I have never had a problem with media queries. After testing your website through an online iPhone emulator in both portrait and landscape mode, the font-size is set to 65%:
http://www.testiphone.com/
However, if the media query above does not work, could you try changing your viewport?
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
jQuery
$(document).ready(function(){
if($(document).width() <= 320){
$("#footer").addClass("newclass")
}
})
CSS
.newclass {
font-size: 65%;
line-height: 110%;
margin-top: 12px;
}
Edit 2 This question is looking for a smooth, clean way to reflow text on the iPhone.
Improving a web app to have 2 different widths (320 & 480) depending on the orientation. The intent is also to have 480 wide available for non mobile (ie > 480 width) screens. It is working mostly as desired, except for when the page is refreshed in landscape. This causes the layout to go back to 320 (on the left side) and leave a dark bar on the right.
Load in Portrait
Rotate to Landscape
Refresh in Landscape
It takes rotating to portrait and back to get resize and image 2 again. That is a usability issue for me. The page resizes & rotates great on Android and is 'full-size' on desktop.
Anyone know what I'm missing? I've attempted many iterations of this and read about a couple bug solutions. None of the ideas are changing the outcome. About to file a bugreport. I have a hunch it is in the lines of the media query #container.
Edit: The site was built for mobile (320 wide). The desire is to expand the usage of space when that space is available. The main intent is to have text & elements reflow. Looking at the photos, notice the alignment of the input fields with their labels.
I have tried 2 approaches to make this work. Other was to use javascript to change #container width. Currently using with the following media queries at the end of inline style sheet. I prefer to solve this with media query.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="HandheldFriendly" content="True">
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>The Title</title>
<style type="text/css">
html {
margin: 0;
padding: 0;
}
body {
font: 14px Verdana, Geneva, Arial, Helvetica, sans-serif;
}
#container {
margin: auto;
width: 480px;
.....
#media screen and (max-width: 480px) {
body {
-webkit-text-size-adjust: none;
}
#container {
max-width: 480px !important;
width: 100% !important;
}
}
#media screen and (max-width: 320px) {
body {
-webkit-text-size-adjust: none;
}
#container {
max-width: 320px !important;
width: 100% !important;
}
}
</style>
.....
Got a breakthrough. After dozens of variations in the media queries, this code has 'broken' the problem:
function orientation_change() {
if (window.orientation == 0 || window.orientation == 180)
document.getElementById("viewport").setAttribute("content", "width=device-width, maximum-scale=1.0, initial-scale=1.0, user-scalable=no");
else if (window.orientation == -90 || window.orientation == 90)
document.getElementById("viewport").setAttribute("content", "width=device-height, maximum-scale=1.0, initial-scale=1.0, user-scalable=no");
}
with:
<body onload="orientation_change();" onorientationchange="orientation_change();">
The media queries of the original question are still included to reflow the text when a rotation occurs. However the refresh partial black screen issue is gone. Found insight on Apple iOS Safari Web Content Guide. In particular, Handling Orientation Events.
I hope this helps in the process of Responsive Web Design.
I am doing a iPhone app using Phonegap & also using jquery mobile. I want to set background image for data-role=page div. In this height of page is equal to screen & hence background is set to size of screen. But the page content length is much greater than screen & hence gray background is seen after image completes.
My question is whether there is a way so that we can keep the background image fixed & scroll or move only content of page & not background image.
Just to mention I have tried full size background jquery pluggin. Its working on Android but not on iOS.
Can anyone please help? Thanks in advance.
Ok, so what I did instead was to create a fixed element within the body element of the page.
So it would look like
<body>
<div id="background"></div>
...
</body>
And for the CSS I stated the following:
#background {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url(images/bg-retina.jpg) 0 0 no-repeat fixed !important;
background-size:contain;
}
And this did the trick for me. Hopefully it helps (someone out there :P)
You looking for css background-attachment property.
div[data-role="page"]{
background-attachment: fixed;
}
Update:
background-attachment:fixed is supported from iOS 5, if you using older version of iOS you may consider usage of iScroll.
you can try this:
.ui-mobile
.ui-page-active{
display:block;
overflow:visible;
overflow-x:hidden;
}
works fine for me.
You can set your background image to the jQuery page:
.ui-page { background-image:url(../ios/sample~ipad.png);
background-repeat:no-repeat; background-position:center center;
background-attachment:scroll; background-size:100% 100%; }
Try with this, this work for me.
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background: url(../Images/loginBackground.jpg) 0 0 fixed !important;
background-size:100% 100%;
background-repeat: no-repeat;
<body>
<div id="background"></div>
...
</body>
css:
#background {
background-image: url("/images/background.png");
background-repeat: no-repeat;
background-attachment: fixed;
height: 100%;
width: 100%;
position: fixed;
background-position: 0 0;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#media screen and (max-width: 480px) {
#background {
background-attachment: initial !important;
}
}
The problem is that iOS mobile devices have errors rendering simultaneously background-size:cover; and background-attachment:fixed; so you have to fix it by #media