I want to load responsive html in uiwebview (xcode) , but the page is not adjusting itself as it is responsive html. When i tried same file in other iphone browsers it is displaying adjusted contents i.e. adjusted contents . I dont want to use phonegap for this. How can I display responsive html in this case.
A couple of things you might check are the following:
try to define (or undefine) the viewport in your responsive HTML, e.g.:
<meta name="viewport" content="width=320,user-scalable=yes,initial-scale=1.0">
check if things improve by setting scalesPageToFit:
If you set this to YES, the webpage is scaled to fit and the user can zoom in and zoom out. If NO, user zooming is disabled. The default value is NO.
But these are just shots in the dark, since you provide no information about the way you are doing things and what exactly does not work. In any case, I hope it helps.
Related
I searched several times to make css for fit my website for IPHONE and IPAD.but got few methods to solve this with using meta tags and css styles for these devices.but I have few questions about this.
1.need to add individual meta tag for landscape and portrait in both iphone and ipad?
2.how to add css for for landscape and portrait?
3.will this work without adding meta tags(with css)?
4.I'm tring to add a world map for fit screen for both iphone and ipad,then will I need to re size the map image?
5.what is the theory for change the meta tag value with each devices and each positions?
Please have a look at http://msdn.microsoft.com/en-us/magazine/hh653584.aspx
This is about responsive webdesign
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
I have a website that looks fine when viewed in Safari on an iPhone. In iOS3.x you can save it as an icon to the Home Screen and it opens fine.
But in iOS4, while it still looks the correct width in Safari, if you open it direct from a Home Screen icon then it's too wide.
I've spent a couple of hours fiddling with various settings of the viewport meta tag, and CSS tweaks, but no joy. Can anyone see what's wrong, or why it would be different in iOS4 vs iOS3?
EDIT:
I tested it, and something is definetely wrong. I can't help you here, but it probably has something to do with your CSS.
Original answer:
That's because iPhone automatically saves the current zoom level of the website when you create a web-clip to your home-screen. Make sure you zoom all the way out before creating the web-clip if you don't want this to happen.
I looked at your CSS and you are defining the width a set px. Try using "width:100%" in your divs (wrapper, window, main, etc...) instead of a set px. Of course this means you will have to "recognize" the device and send a different css if its anything other than a webview on the iphone.
For now just test the 100%, if it works then you can start to look at redirecting css depending on device that is viewing the page.
Hope this makes sense, if not let me know.
FYI - this is driving me nuts. My homescreen link worked absolutely fine with vn 3 and now it's broken.
I'm sure this is a bug... will respond if/when I figure out a fix.
I have an application requirement of displaying custom ads in it so I decided to use UIWebView and load specific url with 468x60 ads generated in it. It works like charm, except one thing: loaded ad is too big (naturally) for 320px iPhone screen and I am unable to force it to shrink a litle bit.
What could I possibly do about it? Maybe there are some Javascript/CSS/HTML stuff I could do in ad page?
Checkout the "viewport" meta-tag. It'll let you tell the phone what the width of the page is and you can also set the initial zoom level.
https://developer.apple.com/library/content/documentation/appleapplications/reference/safariwebcontent/UsingtheViewport/UsingtheViewport.html
UIWebView has a property called scalesPageToFit, or you could clip the image to the required dimensions, or resize the property to the correct size before downloading and displaying.
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