I want to creat a php page named contact us especially for iphone to display it in webview.current page of contact us on website is large and its visibly it not good looking in webView.
What size of page should i made in order to diplay it clearly in iphone UIWebView.
You're asking the wrong question. The question you should be asking is "What is it about my current page design that makes it unsuitable for display on the iPhone?" When you figure that out, you'll know how to fix your login screen. (Although since you seem concerned about screen size, my guess is your design is too busy/complicated and expects/assumes a large screen size. Consider simplifying your HTML and CSS, and reducing your overall design to only what's necessary.)
There are several meta tags you can send to Mobile Safari that will lock the scale factor or the px width of the web page. This may help manage how you want your page to show up. For instance I use this on a small page that I want to show up at 1:1 scale on my iPhone (I use it for icon visibility testing).
<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no"/>
Related
I've been banging my head against the wall with this issue and I hope someone can help:
I have a page that I'm sharing on Facebook (currently using the js sdk / fb.ui / method: 'share'), the flow works fine, the page gets shared BUT the preview of the page on the user's wall or feed sometimes shows a square image sometime shows a rectangle image.
I have set the open graph tags properly on the page and the scraper seems to find everything fine, but I still get this inconsistency when it is displayed on user walls. Is there a way that I can specify 2 different images (one for square presentation another for rectangle)?
One more thing, the image that I have specified on the og:image tag is exactly 1200 x 630 pixels, as per the best practices docs.
The problem is that Facebook will crop pictures that appear to have white space on the sides. To avoid this problem, fill the sides with a different color (like a light grey). Also sometimes the preview image seems to be cached on FB servers longer than it should be, especially if you haven't changed the filename. You can use FB's debug tool at https://developers.facebook.com/tools/debug/sharing to preview image links for any URL before you insert them.
https://developers.facebook.com/docs/sharing/best-practices#images
Since you said that the image is 1200x630, there should be no problem. That being said, Facebook decides how the posts look like and there is nothing else you can do. It depends on several factors afaik (how many likes, how many spam reports, ...).
Facebook will crop pictures that appear to have white space on the sides
They don't seem to do that with me. They just hack it into a square, usually centered (I'm assuming we're talking about general pics in posts, and not profile pics.)
What I've had to do is make the image square by adding dummy filler strips to the top and bottom for landscape pics, or to the left and right sides for portrait. I'll have to be careful if I use white filler.
I've been looking for the pixel width of the facebook homepage, excluding the page ads and your profile options, such as MESSAGES and News feed.
I have tried searching for it, but my answer is not found. Please let me know if you have the answer. (And if you have facebook on max size on your browser, if that changes anything, but I mean like the full width of the full size web-browser.)
Thanks.
If you want to know things like this, and you know your way around a graphics editing program, make a screen shot of the FB page, load it into your editor and measure in there.
These programs e.g. all show the size of the bounding rectangle if you make a rectangular selection of the item you want to measure.
This does not work if the objects in the web page size with your windows browser size, but even then you can often calculate a size by e.g. subtracting sizes of fixed elements from your browser window size.
What is the best way to display lots of RichText (HTML formatted)
At the moment I'm working on an app for a forum. As you'd expect the posts on the site have lots of HTML formatting, lists, images bold text, colored text, etc...
Now there are several options I can think of (non of them ideal, please if you think of any other options post them in the comments):
Custom Cells using NSAttributedString+HTML + DTAttributedTextView for each post?
Problems: I used the NSAttributedString+HTML categories in the app elsewhere and it was less then ideal, creating an NSAttributedString seems to be quite expensive (slow) even in small amounts.
For 10+ posts each of which may be the length of an entire article would be awful + although DTAttributedTextView supports the IMG html tag (an most tags) it doesn't support remote loading of images unless you specify their width and height in the img tag. And for a forum where an IMG tag could be a smiley (10*10) or a screenshot (640*960) there's no way to predict that.
(Since writing this NSAttributedString+HTML, which is now renamed DTCoreText, has added full support for <img> tags and improved greatly!)
Custom Cells with a UIWebView in them for each post?
This one I considered for quite a while, however when reading this blog post I realised a problem that would cause, Smooth scrolling. The idea of having a native application for a site is that it is better then using a simple UIWebView to view the sites mobile theme. If the app lags and is jerky while scrolling that is worse not better (also as I need to display images hiding the webview's like he suggests wouldn't work). Also UIWebView's need to be created on the main thread or they break.
Back to the UIWebView?
Annoyingly besides doing a pathetic cheat, (like in the iFans app) where you only display text and then if they click it a UIWebView loads with all the nice images etc..., the only option left seems to be to do what I think the TapaTalk app does and have the entire thread view as a UIWebView. This isn't too bad as it will probably have quite good performance and will allow me to possibly add user controlled themes etc.. but I find the idea of using a UIWebView in a websites native app repulsive.
Does anyone have any experience creating web powered app, like maybe a facebook client, forum app, or new site app which had to display content from the site (I don't really count a twitter client as it only has to deal with text & links in small amounts per post). Or any ideas on the best way to display RichText content in an iOS app?
Any idea's would have to deal with the lot:
Multi Coloured Text.
Right, Left & Center aligned text.
Images (of variable size).
Bold text.
Text of different sizes & fonts.
Underlines text.
YouTube Videos.
HTML tables.
Just in case the actual question wasn't very clear in all of that I'll sum it up:
"What is the best way to display lots of RichText (HTML formatted) content for a forum client app"
So if I am reading this right, you want the forum posts of a given topic to be cells of a UITableView and the cells need rich formatting?
Assuming this is correct, I imagine each post will take up a lot of the screen (large cell height). In this case, having a UIWebView as a subview might not be as bad performance-wise as you might think. UITableView reuses cells so really only the visible cells need be loaded into memory.
I'm also assuming you are able to access the forum via an API, right? In which case, you should be able to pre-load data immediately prior to loading the view and the UIWebViews will only be used for formatting. You can even load a CSS file from your app bundle when you loadHTMLString into your UIWebView so you're not loading that from a server every time.
All that being said, if you did have a lot of concurrently visible cells it might be a different story and I'd maybe consider only showing plain text in the UITableView index and displaying the rich formatting only when the user taps the cell to view the single post. This might also be better from a design standpoint as having a ton of differently formatted cells on screen could potentially end up looking a bit sloppy.
Also, this may be obvious (especially since you seem to be both performance and design conscious) but please don't use UIWebView for UI controls. Any time I see a UIWebView tab bar or fake navigation bar I cringe (ack, Netflix). For formatting though, a lot times it's the only way to fly if you're loading a lot of dynamic content from a server.
NSAttributedString+HTML already supports lazy loading of images. See the Demo that shows how to do that. It's reasonably fast but you want to hold of parsing the HTML for content that is not on screen.
It mostly depends on what UI you want to achieve. NSAS+HTML is meant for situations where you control the quality of the HTML (i.e. because you generate it yourself). There it affords you with an unprecedented level of control over the view hierarchy because you can embed your own custom views to show images.
In other cases where you cannot be sure about the quality of the HTML you have to use UIWebView and work around all of it's limitations, one being that it takes enormous amounts of RAM and it slow to show the contents. Also UIWebView is not thread-safe (because WebKit is not).
In my app I load some webpages in a 480*320(landscape) UIWebView. But the text is too large, well really the whole content of the page is too big.
Is there some trick that you can do to scale down the whole page in the web view so that it does not seem completely out of proportion to the rest of the app?
I'm guessing there is not and that the only way is to get the HTML of the whole page and look for Font tags and change them all to something smaller and then loading it into a UIWebView.
Thanks for any suggestions or ideas you can offer,
-Code
The UIWebView property scalesPagesToFit should work:
myYebView.scalesPagesToFit = YES;
From the UIWebView documentation:
You can also use the scalesPageToFit property to programmatically set the scale of web content the first time it is displayed in a web view. Thereafter, the user can change the scale using gestures.
I'm trying to optimize our News pages for iPhone. One problem I've noticed is that I'm able to tap and move the page horizontally (i.e. wiggle).
My question is, how I can prevent this horizontal movement from happening?
All of our News pages have this problem. Here are a couple examples:
With picture
Without picture
Something is definitely set greater than your device width. Add the following to your css to find the culprit.
* {
border-style:solid;
}
You can then narrow down your search by setting border-color:red; to individual classes/tags/ids.
Add "overflow-x: hidden" on the body.
You can try setting user-scalable=0; and see if that has any effect.
This just happened to me too and it was the result of an extra closing div tag. Once I removed the extra </div>, the horizontal "wiggle" didn't happen any more.
I too, had the iPhone "wiggles" on a web page. It ended up being caused by an image that was wider than the column width it sat in (it was the last column in the row using Twitter Bootstrap). You might be thinking "obvious", but it's hard to spot when the image background matches the page background.
Just make the image responsive, or smaller than the column width - that solved it for me.
Taking the idea from other websites, most of big sites have a mobile site. look at those (the only one i know is facebook m.facebook.com) you can maybe see how the css is done. possible way of doing this is %. I would suggest to take out the sidebar for the mobile version. big pictures should be taken out or be resized so the browser doesn't have scroll bar side to side.