I'm developing an iPhone application using PhoneGap. In order to identify when the button is clicked, we have changed the active image of the button.
<a class="grid-image btn-image-pharmacycard" onclick="location.href='#prescriptionCard';">
Here is the css:
.btn-image-pharmacycard
{
background: url("../image/iphone/pharmacy-card-iphone.png") no-repeat scroll left top transparent;
}
/* while focus Pharmacy card in gird image, change another image*/
.btn-image-pharmacycard:hover, .btn-image-pharmacycard:focus
{
background-position: left bottom;
}
Sometimes what happens is that, in the application, without clicking the button, the hover image is shown instead of the normal one.
Any help is highly appreciated.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=0"></meta>
iPhone trying to be user friendly and always hover to some html inputs.
setting the scale to 1 will always disable any zooming or hovers
Related
Im making a web page that has a 'fullscreen mode'. Its a normal web page until you click a button and then a div is created that has 100% height and width, and the old content is hidden. The fullscreen mode provides another button to return to non fullscreen mode, which hides the div and unhides the original content.
This works fine except that I also want to hide the browser chrome with this JavaScript method:
setTimeout(function() {
window.scrollTo(0, 1) },
100);
The JavaScript scrolls down the page enough so the browser chrome is no longer visible. The problem is this requires the page to be taller than the viewport so its able to scroll. If the content has a height of 100%, this cannot happen.
My current workaround is to to add a padding of 70px to the bottom of the fullscreen div. This works fine for the iphone, but then this unnecessary spacing is added to all devices. This may break the fullscreen effect I want in some, and creates unnecessary scroll bars in dektop browsers.
Is there a smart work around? Or do I need to detect the browser chrome height or get it from detecting the device, and add this padding accordingly?
Thanks
The best way is to write dedicated css for devices and their orientation.
You can see the media queries to detect the orientation of the devices ans set the css according to that.
<link rel="stylesheet" type="text/css" href="ipad.css" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px)" />
<link rel="stylesheet" type="text/css" href="iphone.css" media="only screen and (max-device-width: 480px)" />
To hide bar use this script:
if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}
function hideURLbar() {
window.scrollTo(0, 1);
}
This is how the site I'm putting together should look:
GB Personal Training
This is what it looks like on the iPhone:
iPhone Browser
As you can see it pushes in the #wrap and #outer-wrap DIVs, so that the background images in them have a right margin and I don't know why. I only have access to the custom.css file and not the HTML.
I'm currently editing a clone of it at:
gbptclone.live.subhub.com/
Define max-width in your body. Write like this:
body {
min-width: 1000px;
}
add this inside your HTMLhead:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Actually this will prevent the user to zoom the content (wich sucks, from an user end experience):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Instead, in my opinion (and I am no guru), you should use:
<meta name="viewport" content="width=1000px">
Try setting a width for #outer_wrap and #wrap (you probably want 100%).
It looks like Mobile Safari is expanding the size of the #visual-portal-wrapper div, which isn't enough because Safari resizes text for iPhone display. You can change this with -webkit-text-size-adjust: none; but that would make the links rather undersized for iPhone users. That's why it fits in a normal browser but not in Mobile Safari.
Changing the width of the divs should stop them from having content expand beyond their edges (they're 974px by default because that's what #visual-portal-wrapper is, but all the contents overflow and cause the visual errors) and have the background images appear cut off. You might also want to add background positioning for #outer_wrap since it appears slightly off on the screenshot from what I'm seeing in Firefox.
Edit: Alternatively, you could try changing the width: 974px; on the #visual-portal-wrapper div to min-width: 974px;, of course making sure you account for IE's problems with min-width).
I am testing a HTML5 webpage in iphone. Also used CSS3. The page centered in all browsers. But problem is in iphone. It is left aligned here. I was trying -
<meta name="viewport" content="width=device-width, initial-scale=1.0">
But no luck. Please help me about this issue. The URL is:
http://www.stonegardenbd.co.cc/projects/vapp
Thanks.
Try setting the body min-width. I found that when the width was set, that it didn't center the body in the iOS browser.
Here is an example:
body {
background-color:#0e7242;
color:#FFFFFF;
font-size:15px;
min-width: 1000px;}
div.content {
margin:0 auto;
width:900px;
}
One thing to note is that if you have the meta viewport tag in there, the user will have to scroll out to see the entire webpage. You may prefer to have the entire width be loaded, and the user scroll in to see the text.
my site is a small, 540x500px box centered on a page. iPhone and Blackberry are both cutting off the top of the content. I have it absolutely centered on the page. I've been messing with the meta viewport settings in hopes have getting the page's margins dealt with on other devices and have had some luck, but when it comes down to it i cant find a solution that combines both of my lines of code.
My code is below.. I've explored media queries, setting the meta to device-width (cuts off margins) and a host of other options. honestly, I know I'm being picky, and I've spent a stupid amo unt of time on this.
I need help!
First, the HTML
<div id="container">content</div>
CSS
#container {
width:540px;
height:500px;
top:50%;
left:50%;
margin:-250px 0 0 -270px;
position:absolute;
}
Meta settings
<!--<meta name="viewport" content="width=device-width, initial-scale=1">
cuts off top of content-->
<!--<meta name="viewport" content="width=580, height=540">
works for iPhone-->
<!--<meta name="viewport" content="width=540, height=500">
works for iPad-->
Apple recommends that any page below 980px be declared in width in your viewport settings.
http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html
Used a media query to adjust my negative margins for mobile use. 1024px is max resolution on an iPad.. which covers most tablets.
HTML heading
<meta name="viewport" content="width=500">
CSS heading
#media only screen
and (max-device-width:1024px) {
#container {
width:500px;
height:500px;
top:0;
left:0;
margin:0 auto;
position:static;
}
}
It looks like your negative top margin is cutting off the content.
I've found that mobile content works best when positioned in a linear, top down fashion.
If that is the only div on the page, use a mobile stylesheet to strip out the positioning, keeping only the width, height, and some smaller, simpler margins.
Then use something like <meta name="viewport" content="width=580">, setting only the width.
This has worked for me in the past.
I'm trying set up my mobile webpages for iphone but it fails to show the correct width.
The issue is..
In most of my page's posts they have pictures which have width about 480px to 500px
so if I setup up meta as follows:
1 = this will show all part of pictures in the post but the screen of page larger than iphone screen..
name="viewport"
content="width=480px; initial-scale=1;
maximum-scale=1; user-scalable=1;"
2 = this will show the pages correct with inside iphone screen .. but the right part of images will hidden to outside of screen width in stand mode.
name="viewport"
content="width=device-width;
initial-scale=1; maximum-scale=1;
user-scalable=1;"
Please help to set to show full images in iphone and the webpage zoom correct width of screen.
test use iphone at: http://www.xaluan.com/modules.php?name=News&file=article_mobi&sid=242186
You might want to try something like this:
lets say your html looks like this:
<body>
<div id="wrapper">
<img src="small-image.jpg" />
</div>
</body>
you can do this with your css:
/* you can modify this as you see fit */
#media screen and (max-width: 480px) {
div#wrapper {
max-width: 100%;
overflow:hidden;
}
img {
max-width: 100%;
}
}
Note: This will only work if you set a width on your wrapping element, like we're doing there. max-width is also fine for that. If you don't the element probably will stretch out with the image.
This will ensure that big images never become bigger than the element that wraps it, but smaller images will not be modified.