I have a page on my website that has to be displayed only on iPhone. I kept the resolution of the background image page 960X640 according to iPhone 4. But on opening on iPhone, the page donot covered the whole screen but left some space around it.
I thought that it must be a resolution issue and searched the web but didn't found anything.
Here is the link to my website page
please tell me how can this be displayed in the whole screen.
Thanks
Set the body margin of you webpage to 0px. <body style="margin: 0">...</body>
Related
So I'm having an iPad specific problem in Safari (it also seems to happen sometimes on the iPhone, but either sporadically or it's just not severe enough to notice).
But I have a page with 5 audio players (all html5) and they all start within a div with display: none. Clicking on the title changes the display to be display: block and the player pops up with an unfinished html 5 player. This works everywhere (sans old IE of course) and even works on the iPad.
However, when clicking on the title the entire page gets blurred out on the iPad. I've tried playing with the code and it seems the problem is loading a div from "none" to block" that has an html5 audio file within it. I even changed it so it only displayed the standard controller and I removed all of my extra code and the issue persisted.
Does anyone have any ideas on this?
The link for the website is http://artferretti.com/paulperrysound/recordings/
here's a link to an image from the iPad: http://artferretti.com/blurrediPad.png
I just had a similar issue where my div is all blurred on Ipad when a Vimeo video is inside the div.
I removed the overflow:hidden and it fixed it.
You can check if you have the overflow css rule, could be the key.
I'm building a mobile website using FancyBox, which works fine on all Android devices I've thrown at it and all iPhones, but has a problem on webOS devices.
When my subject pops up in FancyBox, it's supposed to be centered in the the viewbox of my device, but on webOS, the subject is at the top of the page.
This causes a problem when a user clicks on a subject at the bottom of my webpage and then has to scroll all the way to to the top to see it.
Any ideas?
The problem is that scrollLeft and scrollTop values of the page aren't updated on webOS when you scroll in the page. This is because internally, the page is rendering as one large image and the WebView used by the browser is just panning around on that image. The FancyBox code uses those properties to adjust the top/left CSS values of the box when it's displayed.
is it possible to add an iframe to an iphone web page. I tried adding a standard iframe with height and width 100% however when i use them to display them in the simulator from the local files i cant scroll even after setting scrolling to auto. IS this a limitation of the simulator or am i making a mistake somewhere. im using this code
<iframe src ="http://moodle.acs.gr" width="100%" height="90%" scrolling="auto">
iframes.
I also have problems with an iPhone and iframes, and this is on a normal iPhone, not a similator. I don't think you can scroll within iframes at all on the iphone browser. You'll have to do things with the <meta name="viewport" or iframe width/height to get it to work
What does the iphone (3gs) safari use as the thumbnail displayed when switching between windows?
for the page below, built using jqtouch, the page contents disappears when clicking the page switcher. the background remains
http://www.maths.manchester.ac.uk/~dszotten/limmud/iphone/
Well, that's funny. My page and the jqtouch page both have their screen working as it should. Yours goes blank just like you said. Maybe you can remove features from your page and move it towards the sample case bit by bit to figure out what's going on.
How do I go about making an image or section of the page full screen on the iPhone?
I have an image that is 480 x 320 and I want to pull that up full screen on the iPhone but it has to be within a webpage so that I can make the image a link back to the previous page.
Currently if I drop the image on a blank page and I open it up on the iPhone it just shows up in the top left corner.
Hopefully I'm not in breach of the NDA here, but here goes.
Mobile Safari, by default, renders a page as if that page had been viewed by a desktop browser, with a default width of 980 pixels.
To change this behavior you need to explicitly declare the viewport, which you do via meta tags. If you declare the width to the constant device-width, it'll default to 320 instead of 980, and everything looks great.
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" />
</head>
I'd say set the viewport meta tag in your blank page so Safari knows to render the page at the right size. For more information, see this link:
Apple iPhone Safari Documentation
nice links which may help you further:
How to optimize your website for mobile devices:
http://solutions.treypiepmeier.com/2008/12/01/optimizing-a-website-for-iphone/