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);
}
Related
I have a mobile website with two header buttons. In portrait mode on iPhone it works fine. I can push the buttons.
Here is the problem:
When I switch to Portrait mode and try to tap on the buttons the native iPhone address bar shows up. It comes over the header so I cannot push the buttons.
The images show the problem:
After pushing one button you see this:
How can I prevent this problem?
Is there a way to detect i the iPhone browser bar is shown to the user?
Edit: When you use Safari whatever page you are on and turn your phone into landscape orientation and tap too much at the top of the page the address bar shows up. If you page has a fixed header bar you cannot reach it.
Edit: When I make the header position fixed then it turns out that I cannot tap the header buttons anymore when the orientation changes to landscape and the address bar shows up.
Edit: Here is a sample project which I use: http://mobilegwt.appspot.com/showcase/ You can try this on an iPhone and see the effect I showed in the images.
Maybe you should try to add the meta tag to run in full-screen mode :
<meta name="apple-mobile-web-app-capable" content="yes" />
Referenced at this link.
EDIT
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
Have you tried adding a padding to the body? All of the fixed header designs have this. The padding to the body is equal to the height of the bar on your site that contains the icons. You can do them inside media queries if it's only on landscape:
/* iPhone 4" screen: landscape */
#media screen and (aspect-ratio: 568/114) and (device-aspect-ratio: 320/568), screen and (aspect-ratio: 568/320) and (device-aspect-ratio: 320/568) {
body {padding-top:20px} /*your padding*/
}
You can give a try add min-height to your body.
<style>
body { min-height: 505px; }
</style>
This is the source.
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
I want to make html5 fullscreen app. I made a page and added it as an icon to my iphone. I added metatags:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, user-scalable=no" />
What I wanted to achieve is: black status bar on top (this does not work and I do not know why. It is still default status bar...anyone ideas?) without possibility to zoom (like in facebook app) - this works fine.
Now the problem - I can scroll on my iphone even if my app fits on the screen. It bounces back, but I dont want this behavior. I would like to disable that and enable scrolling for a particular div (.ui-content). How can I achieve that?
EDIT:
status bar is black now. It changed itself after some time. Was the previous version cached on the iphone or what?
This will prevent scrolling on the whole page
document.ontouchmove = function(e) {e.preventDefault()};
In your case, where you want some divs to be scrollable, and some not to, you should be able to catch the event before it gets to the document
scrollableDiv.ontouchmove = function(e) {e.stopPropagation()};
If your using Cordova 1.7+, open the Cordova.plist file and set the key UIWebViewBounce to NO
Extending dmanxii's approach here is what we are doing.
$("body").on("touchmove", function (event) {
if ($(event.target).is(".WhatEverClass") || $(event.target).parentsUntil().is(".ParentClass")) {
//console.log("NOT Disabled");
}
else {
//console.log("Disabled");
event.preventDefault();
}
});
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.
I know how to hide CSS from all browsers except the iPhone: see How do I apply a stylesheet just to the iPhone (and not IE), without browser sniffing?
But: how do I hide CSS from the iPhone, but not other browsers?
You could possibly use #media queries:
<link rel="stylesheet" href="noniPhoneStylesheet1.css" media="only screen and (min-device-width:490px)" />
Which would automatically exclude iPhone browsers from downloading that particular stylesheet (the iPhone's screen width being 480px); so putting any styles you want to hide from the iPhone into that stylesheet should work. Although, obviously, it'll also block that stylesheet from other devices that respect media-queries and have a screen width below 490px.
You can still do the conditional check, for iPhones append the iPhone CSS otherwise your normal CSS.
var agent=navigator.userAgent.toLowerCase();
var isIPhone = ((agent.indexOf('iphone')!=-1);
if (isIPhone)
document.createElement("style")... //iPhone CSS
else
document.createElement("style")... //normal CSS
Or a simple redirect to a page without the CSS, or use PHP to detect iPhones and deliver them a page without the style — something with a flow of:
if iPhone {
echo //page without CSS
else {
echo //page with CSS
}
I actually ended up going with a slightly different, and very ridiculous, solution that uses media queries and getComputedStyle to redirect to a mobile site if we’re on an iPhone-like device.
<style media="only screen and (max-device-width: 480px)">html{border-top-style:dashed;}</style>
<script>
if(window.location.search.indexOf("?m=t")==-1 && window.getComputedStyle) {
var mobile = false;
if(window.getComputedStyle(document.getElementsByTagName("html")[0],null).getPropertyValue("border-top-style")=="dashed") {
var mobile = true;
}
if(mobile) {
window.location.replace(window.location+"?m=t");
}
}
</script>
I’m sure I got the getComputedStyle idea on Stack Overflow, but I can’t remember where.