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/
Related
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">
I developed a website. The layout is fine in desktop. But it is not responsive. I tried for mobile with media queries like,
#media only screen
and (min-device-width: 320px) and (max-device-height: 640px)
{
.....
}
I am using chrome development tools and make changes in the site according to the size 320 x 640. Now the problem is fine in simulator but not in the actual mobile.
Help me to find the solution.
The symptoms you describe suggest that you may not have a viewport metatag in the head of your page, so double check this first.
What you want is something like
<head>
...
<meta name="viewport" content="width=device-width, initial-scale=1.0">
...
</head>
More about viewport meta tags
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Mobile Safari is making some fonts bigger when I am rotating the phone.
That's is driving me crazy and I can't get rid of this behavior.
Read about -webkit-text-adjust-size and tried it with all possible combinations but it doesn't seem to work. Is there anything new added in iOS9?
Have you tried the META Viewport tag?
<meta name="viewport" content="width=device-width, initial-scale=1">
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 have a phonegap app that uses both AngularJS and jQuery Mobile.
I've noticed, that under ios, sometimes I get white flashes on page transitions - those are done using JQM's changePage.
I do have a fixed header and footer, which, by google, could be the source of the problem.
However, all results indicate that this was an issues that's already fixed in JQM, though it is still occuring in my app, which is running JQM 1.3.1.
Any ideas how to fix this?
Thanks!
EDIT:
I also tried adding user-scalable=no, disabling zooming and dropping data-position="fixed" from header and footer. None of these helped.
< meta name="viewport" content="width=device-width, initial-scale=1" />
to
< meta name="viewport" content="width=device-width, user-scalable=no" />
OR add this css
div
{
backface-visibility:hidden;
-webkit-backface-visibility:hidden; /* Chrome and Safari /
-moz-backface-visibility:hidden; / Firefox */
}
.ui-page {
-webkit-backface-visibility: hidden;
}
if this not works then check https://github.com/jquery/jquery-mobile/issues/4024
If anyone still stumbles with this, I found this post:
how to speed up changepage in jquery mobile for phonegap app
Even though it's not entirely related, the first answer (without the js code, though it might work with it as well) solved my issue, and improved rendering in android devices as well.