I have a page I am developing in .net using HTML5 intended for a WebView in an iphone App. The page looks just fine in Safari. When I load it in the iphone Simulator it is rendering as plain text, no styles or js loading. I thought it might be an issue with .net, but seeing as it works in Safari i am stumped. When I use the XHTML doctype it works just fine in the Simulator. Any ideas why this is occurring and what the fix may be? Thanks!
Do you have problems rendering on the device? If not, don't worry about the Simulator, because it's not guaranteed to represent perfectly how the hardware works.
well it seems that the lovely .net mobile.browser file was setting the mime type for the simulator as xml. set it to xhtml and all is rosy.
Related
I am creating an PhoneGap application for iPhone.
When I am designing and testing HTML file in PC-Browser it looks different.
And In Phone gap it looks different.
Actually CSS not functioning as accepted. Is this known issue? OR Am I missing something?
I can provide code snippet or screen-shots if needed. Please help
Without seeing code this is almost impossible to actually answer. BUT I will say this - with mobile you are using Webkit, meaning that anything in your CSS that referes to -moz- will not work. Also, you're dealing with a version of webkit, not the newest, and not the oldest - well that is unless your on android 2.2.2
You should be safe to use any -webkit- syntax in your CSS, but just know that certain properties may not be supported in android as they have fragmented their phones quite and bit and have shipped a somewhat old version of webkit with specific OS's.
iPhone you should be all good to go, now if you continue to have issues that are more specific I would recommend you post your code so we can see what is going on - you could just have some weird markup somewhere.
I'm trying to get an iPhone browser emulator to work on my website so it will work on all platforms. Are there any Javascript snippets that emulate the iPhone browser? I need it to zoom and browse the web, but the bookmark function is not required.
There isn't such a thing, as the iOS browser has a number of differences to any desktop browser.
The closest you could have is an iFrame surrounded by a picture of an iPhone, and instruct people to use Safari 5.
If you're on a Mac, you can use the iOS Simulator. Download Xcode from the App Store and with it comes the iOS Simulator, which also has the Safari app virtually exactly as is on the iPhone.
http://www.browserstack.com/ does exactly that. It ain't perfect, but it works..
I have a software that eventually will have some reports to be accessed via iPhone.
Once I am not willing to develop an iPhone app, I´d like to make these reports accessible via iPhone Safari browsers.
GMail in iPad uses HTML 5, so I guess I can do the same.
My question is where can I find some resources to learn best practices doing so and how can I test it in a PC computer.
Thanks
Here is a similar answer I've given: Exclusive CSS for iPhone/Android
For testing you can use Chrome or Safari, as they are both webkit browsers (which is what the iPhone uses). Safari can even render as the iPhone user agent.
Hope this helps.
Please take a look at PhoneGap, I think that is what you are looking for.
You can emulate the program in xCode, but you will need an Apple for that. For PhoneGap also..
From the app architecture view-point you should also consider introducing app-specific optimization such us:
Simplify the app (show only what you need for mobile)
Minimize Application and Data Size
Aggregate Images into a Single Composite Resource (Sprites)
Include Background Images Inline in CSS Style Sheets
Keep DOM Size Reasonable
Ensure Paragraph Text Flows
Avoid Redirects
I'm playing around with a simple web app locally, and can't quite figure out why it is not caching correctly on the iPhone. I am serving a .manifest file with the correct MIME-type, and the site works perfectly fine with my local server turned on or off on desktop Safari, Chrome and Firefox. It is only mobile Safari that is failing to cache the site. Any ideas why this might be?
It seems to be an iOS bug.
I found out that mobile safari will always run into an application caching error if you have at least one web view opened and the you clear the browser cache. I think that clearing the browser cache will destroy the cache database. All accesses to the cache database will then fail. It seems that the browser creates this database only on startup.
To get the application cache working again close all safari views and finally close the browser by returning to the home screen. Now applicaton caching should working. Some mobile devices also requires switching on and off.
If you know a methode to detect this situation let me know it, please.
I had a similar issue but Safari and iPhone were both NOT working whilst IE and Firefox were working. The reason was complex. One was a misspelling of the word "manifest" in the HTML tag. Silly mistake and very frustrating that IE and FF still worked offline. The other issue was that I was using default.asp as the main page of my app and not including this in the manifest.
My app was mydomain.com/myapp/ and thus the browser never saw the "default.asp". Also, according to the HTML5 spec, the main page need not be in the manifest but apparently Safari sees that a little differently...
I can confirm that the bug is also present on iPAD running iOS 4.3.
I spent quite some time to make the offline application cache work on iPad. I can confirm that the workaround mentioned in the previous post works.
Safari HTML Reference: Supported Attributes says:
contenteditable
If true, the element can be edited on
the fly; if false, it cannot.
Availability
Available in Safari 1.2 and later.
Available in iPhone OS 1.0 and later.
However, on my iPhone, I can't get it to work. Anyone have success with this?
You can try it with this document (admittedly not pure html, but that document works in desktop Safari, and Chrome and Firefox 3). I haven't been able to get even the simplest html document to be editable in mobile Safari.
contenteditable has been added to iOS 5 beta 2, according to one of the developer videos from WWDC 2011. I suggest signing up to Apple's Safari developer program and downloading that video from the WWDC videos page.
If you sign up to be a Safari dev, you also gain the privilege to submit your Website to their online iOS Web app gallery.
Edit: I've confirmed this works on my iPad running iOS 5.0.1. Try it out here: http://www.quirksmode.org/dom/execCommand/
It works, kind of. I thought contenteditable doesn't work on iPhone before. When I set a div to contenteditable I couldn't move the cursor/pointer to where I wanted to move it. But, when I was fiddling around XHTML with contentEditable within iBooks.app on iPad, I found that "execCommand('insertText', null, 'foobar');" worked within Mobile Safari.
If you wanted to, you could make a virtual keyboard using
clever css and javascript, and make it into a bookmarklet.
If you cannot focus the contenteditable element try adding this to your css
[contenteditable] {
-webkit-user-select: text;
user-select: text;
}
The design mode and content editable are working fine in IOS 5.But in previous versions it is not working.There is post
http://mobile.tutsplus.com/tutorials/mobile-web-apps/safari-5_html5/
I think this is because editing HTML requires quite an advanced user interface. That's why desktop Safari implements it, while Mobile Safari doesn't.