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
Related
On load of a responsive page on an iphone or ipad, maybe one out of every five times the page will scroll most of the way down and then stop. It's as if the page content is ending. If I refresh the page or reorient the device, this then allows me to scroll the rest of the way.
My viewport tag is:
<meta name="viewport" content="width=device-width,minimum-scale=1.0,initial-scale=1.0">
I've gotten this on an ipad2, iphone 4 and 4s both on ios6.
Has anyone seen anything like this?
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>
I have a painful issue CSS issue which appears to be caused by the Disqus CSS.
The Disqus CSS seems to cause my page's main content text to randomly change sizes in parts. Clicking refresh will randomly make some text bigger, some smaller and some bold. It only seems to occur in Safari on the iPhone (real and simulator) and is fine in Firefox, IE, Android and iPad Safari. Turning off Disqus comments fixes the issue. I have tried changing Disqus themes and turning mobile view on and off.
Below you can see the same page being rendered differently every time I click refresh (live site-it should look like this)
Any help would be greatly appreciated.
You could try applying the -webkit-text-size-adjust: none; and targeting the Disqus code? If I remember Disqus doesn't use iframes, so it should work if the hierarchy you use is stronger than theirs.
More info here:
http://css-infos.net/property/-webkit-text-size-adjust
Hope that helps :)
Edit: I just had a thought while writing that comment below. You may be able to sort this by setting the viewport width, either explicitly or to device width.
For example, this will make the viewport on an iphone be 320px wide in portrait and 460px wide in landscape (I think that's right?).
<meta name="viewport" content="width=device-width, initial-scale=1">
From the screenshots I think that is actually too small though, so something like this may be better.
<meta name="viewport" content="width=800, initial-scale=1">
This is actually why the text size changes in the first place. The iPhone scales that 800px to fit both portrait and landscape. In portrait though that could make the font far too small so it is increased.
See here for more info: https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
This is a long shot but I'm hoping there's a way to stop IPhones from resizing a page on load. Problem is if it's a site with a lot of need for refreshing (Say a forum) it gets a little old for users to have to resize that page every refresh.
Is there a way to force Safari/The IPhnone to not minimize the site on refresh that doesn't involve a user changing a setting?
There is a meta tag you can use that will constrain the viewport for the iPhone:
<meta name="viewport" content="width=320" />
From Apple's developer documentation:
Use the viewport meta tag to improve the presentation of your web content on iPhone. Typically, you use the viewport meta tag to set the width and initial scale of the viewport. For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing an iPhone-specific web application, then set the width to the width of the device.
There is a constant you can use for the iPhone's device width: width=device-width.
Not sure if this link will work, but you can read more about Mobile Safari and the viewport tag on the Apple Developer website
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/