I have a UIWebView that is smaller than the full screen (specifically 540x560 pixels). My issue is that my jQuery mobile content is being cut off rather than resizing as I would expect a responsive website to do. I've uploaded a sample project with the issue here. Any ideas how to fix this?
check following tag in head section of html which tells browser to make width of viewport to same as device width
<meta name="viewport" content="width=device-width, initial-scale=1">
Remove that tag will remove horizontal scroll
EDIT:
you can not remove meta tag form http://jquerymobile.com/demos/1.1.1/docs/lists/index.html so host it on local server.
Set the width and height of the viewport to whatever the height of your UIWebView. This will register the "bottom" of the browser window and should prevent your content from being cut off if it is the appropriate height.
See here: http://developer.apple.com/library/ios/ipad/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html
Ok #Kevin, only you have doing is resize your UIWebView class in KSViewController.xib. If you want to make your app a web app, only have you add your favorite framework and folder on Xcode project.
Hope this helps. :)
Related
I am currently working on a website using WordPress with a child theme. On the product page, I am using Advanced Custom Field with lightbox for product catalogue (not a store). I am struggled to figured out why the product image & text container appear as a full width on iPad and iPhone. When I resized the desktop browser to iPad size and it show 4 columns and 2 columns on iPhone size. Any help would be appreciate!
http://kampshydrangea.com/wordpress/products/
Thanks,
C
you are using meta tag viewport (<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1.0, minimum-scale=1">), read about it: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I am an iOS developer and i do not have any knowledge about web development.I am trying to load an HTML page on UIWebView since the content size of web page is larger then the iOS device screen size,the webview shows scroll bars which has to be avoided in my case.I want to fit the page to the webview width.
I did read some posts here and understood that i should change the viewport of HTML to get things work as i desired.When i manually change the width and height properties of meta tag in HTML its fitting to my webview.What is the best method to change the view port before loading page.
(I have seen approaches to set scale using stringByEvaluatingJavaScriptFromString: in webViewDidFinishLoading: and i can not prefer doing this because the webview takes time to load the content till then it shows the scalled page then it refreshes.)
Is there any better method to change meta propertied then reading HTML file in to NSString and do poor string level manipulations?The HTML pages are always available locally on the device.
Please help,i need to get it fixed as soon as possible.
My site is: alwaysriding.co.uk
I had updated and use media query to make it displays better on smartphone but I am having some problem with zoom in, zoom out.
When you go to my site with smartphone, you will see the horizontal scrollbar althought I had fixed the width = 480px.
You can see my css if you resize your browser windows.
Thanks in advance.
Chu
I am having an issue where the background image is cutting off to the right when you scroll left to right. This is happening when the app is hosted in the iframe for our business facebook page, not when you go to apps.facebook.com. I have changed the canvas width to fluid and it is not helping.
This is an example of what I am talking about, try scrolling to the right:
https://www.facebook.com/pages/TeleManager-Technologies-Inc/134181063301299?sk=app_241678922556190
This is the link for an actual app:
http://apps.facebook.com/irefill
As you can see in the second link, nothing is being cut off to the side. I tried playing with some css properties such as "overflow" and it still didn't help.
Thank you for your help.
I added a width to your body tag within side of the iframe body - {width:1000px;}
Because you hadn't declared a width on the , it was inheriting the width from the iframe it is nested in, which is 520px, the max-width for facebook page tabs.
Add on a width to your that is larger than the width of the image that is being cut off and you should be good to go.
You only have 520 pixel width to stay inside of on Facebook.
try limiting the
body{width:520px;}
I've been experimenting with html5 and have nearly finished a site for a friend. I have used Paul Irish's html5 boilerplate as a template and it all works fine until I view it in the iphone. It is at this point the site left aligns itself tight to the edge. I have set the container wrapping the site to margin:0 auto as usual, but for some reason I cannot get it to stay central.
Any ideas why this might be happening?
Here is the current like to the site..
http://cynonvalleypals.co.uk.s88828.gridserver.com/
Thank you
You have set viewport via the meta tag, right?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It means iPhone will try to show your content in a 320px width viewport instead of a 980px one. Try to imagine what you will see if you open your website with a 320px width Chrome window? That's what you get in Mobile Safari.
You can debug this easily. Open a Chrome window and use developer tools to set the body's width to 320px. You will see the result. You can tune based on this setting or you can try to use other viewport setting.
try to use viewport in this way, I hope it will help you.
<meta name="viewport" content="width=1040; user-scalable=no;" />
this will fix the width to 1040 but user will not allow to zoomed. you can add user-scaleable=1 in order to to allow users to zoom content.
you try to set the width and margin-right:auto and margin-left:auto (do not use margin:auto)
Check it