I am working on an iPhone mobile web app using jqtouch to make it feel more "native". It seems that safari chokes on large Ajax responses. Is there a limit on response size? Firefox is behaving normally and small responses are working just fine. Not sure where to start on this or what tools to use in safari to help troubleshoot.
You can use Safari developer tools (Web Inspector) on the desktop version, but the size limitation could very well be an iPhone-specific thing. Can you provide more information? What sizes cause the problem?
Your best bet, in general, is to chunk-load large data.
There is a known issue with Safari (both mobile and desktop) that limits AJAX response size to about 512K.
Related
I have been working on an A-Frame demo (code on Github). There seems to be huge performance difference when I run my project in different browsers. I am only getting <10fps in Chrome when I am getting a solid 60fps in either Firefox or Safari. Does anybody know what is causing this performance drop? I need to use Chrome for its SpeechRecognition API, for SpeechRecognition does not work in Firefox for the time being.
The default sky is too heavy, try setting segmentsHeight and segmentsRadius to a very small number.
i am building a new web site using asp.net mvc3 web application ,, and i found some free HTML5 templates in the web which i can add to my _layout view in my mvc3 web application. i read that HTML5 is able to automatically adapt to the screen size of any devices .
So does this mean that incase i use HTML5 inside my layout view , then my web site can be accessed using different mobile devices and the layout of my web site will automatically adapt to the screen size of the mobile devices?
BR
Not so simple. You need to contend with
Big variety of mobile devices. Some support HTML5, some partially support it and some don't support it at all.
Even if a mobile device does support HTML5, a mobile screen is a lot smaller than a desktop so it may not be able to rearrange the view properly.
How a user interacts with a mobile web app is quite different to a desktop web app, so even if it did rearrange the view properly the user experience could be crap.
A mobile user may be connecting over a low bandwidth connection. What size are your web pages, and are they suitable for distribution over 2g, 2.5g or 3g ?
Well, no, not always. HTML 5 is a very broad term and there are many devices. There is no real guarantee that something you write in any version of HTML 5 will show up as you want it in every browser except via testing it and experience from testing.
That said, I think you are referring to CSS media queries, which are not really related to ASP.NET MVC 3 or HTML 5. From the caniuse site here, you can get an idea of which browsers support media queries.
If you use CSS 3 media queries properly, and the browsers which you are targeting support the feature, then the answer to your question will be yes.
Nothing works automatically but I'd give it a guarded "maybe". The MVC3 sites I've developed work well on iPhone, iPad, Android and Windows Phone. For example link
Still needs to be valid HTML5, so I'd suggest using a validator though.
Screen size adaptation isn't a particular feature of HTML5 per se, it's a feature of a competent fluid design with HTML and CSS.
They should work out of the box on mobile devices (in the original iPhone demo, Steve Jobs showed how the iPhone did a good job of rendering existing websites), but there won’t be any automatic adaptation to screen size beyond what HTML already provides.
As far as HTML goes, <meta name="viewport"> can go a long way towards helping your site’s layout on Mobile WebKit-based devices (which is all iPhones, and I believe all Android devices). See e.g.
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html.
What is the best way to create one browser addon or bookmarklet that would seamlessly work on IE, Firefox and chrome, is there some google gadget that would let you do it?
This all depends on what you actually want to create. If your addon requires things like local storage or the use of xPath or other browser specific items than doing this seamlessly and correctly across the multiple platforms wouldn't be incredibly easy.
Generally speaking all the browsers are quite different. Chrome and Safari run webkit, Firefox Gecko and so on. Some support HTML5 well, others don't. If you're creating something complex you will have to do so for each individual browser. However, much of the code from one can be re-purposed with a few extra / different calls on another. Firefox for example has a lot in common with Chrome and Safari and Chrome and Safari are even more so closely related.
If your addon is very simple I'd recommend going with just a bookmarklet take a look at this http://www.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/ using JQuery will help solve some if not all of the browser specific issue's you'll run into.
If you require an addon/extension or a bookmarklet do it with JQuery where possible.
I can't really give a more specific yes or no answer without more information. If you could please expand on perhaps what you're looking to do it would be much easier to help you.
I have a web app that works fine on desktop browsers, but struggles on the palm pre browser (via the emulator). How do I debug the app on the palm pre browser? There doesn't seem to be any error console, dom inspector, etc... I'd expect such tools from a web-app oriented phone.
The debugging tools on the webOS platform are generally still poor, and thats speaking for the application development.
I dont think there is any debugger for the web browser. You're stuck with document.write and related.
And for applications themselves, its better, but not by much. There is a command line debugger that you can use to set break points and inspect. There is also an inspector based on Safari that you can use to inspect the dom and such. And there is basic info/warn/error debugging to syslog. But these are for applications using the Mojo framework, and not exposed to web pages.
That said, the browser is based on Webkit, so its fairly close to Safari 4. There are some good sized chunks missing in Canvas and advanced CSS support. Browsing the developer forums will help see what CSS and Canvas features are missing or broken.
What are the differences from a developer point of view between Safari for Mac and Safari for Windows?
I think it boils down to evaluate differences between (if I missed something, please correct):
- Layout rendering
- Javascript behavior
The final decision to be made being:
Can developers test only on Safari Windows (knowing that we can't afford to miss important bugs)?
Thanks,
JB
As far as rendering and JavaScript are concerned, there is no difference. What is different is underlaying UI library used for browser itself, but page render is the same.
Font rendering can be different between Mac and Windows Safari as the systems typically have different fonts. As long as your page can gracefully handle missing fonts or different font sizes it should be fine.
Style sheet rendering is significantly different between Safari and Windows. To see this, try creating a page that has an element with a z-index of -1. The windows version will function without issue, the Mac version will not allow you to select the elements. Trust me, I wasted about three hours trying to figure out by trial and error why a page would work in one system but not the other. The worst bit is that when Safari doesn't render something properly, it does so without any indication. You have to debug line for line, a dreadful experience.
I have also seen problems in Safari for Windows that don't exist in Safari for Mac on CSS heavy websites. Can't remember the specifics, but they were there.
I am currently experiencing an issue where floating images in a blog with text wrapping around the image do not properly pad themselves in OS X; works fine in windows. Basically I've added padding to make the image align flush left or right such that the edge of the image is at the same offset as the edge of the text of the post; on OS X the image sticks out past the edge of the text.
A site I am working on now has a problem in safari for mac that isn't in safari 3 or 4 for windows. I cant figure it out for the life of me.
A call to java from javascript throws:
java.net.MalformedURLException: no protocol:
at java.net.URL.(Unknown Source)
at java.net.URL.(Unknown Source)
at java.net.URL.(Unknown Source)
at sun.plugin.liveconnect.SecureInvocation.checkLiveConnectCaller(Unknown Source)
at sun.plugin.liveconnect.SecureInvocation.access$000(Unknown Source)
at sun.plugin.liveconnect.SecureInvocation$2.run(Unknown Source)
at java.security.AccessController.doPrivileged(Native Method)
at sun.plugin.liveconnect.SecureInvocation.CallMethod(Unknown Source)
on Safari windows but not safari mac.
Just wanted to add this experience I came across for Safari. Our devs are still going to look into this but not high priority for us since Windows Safari isn't much of our user base unlike Mac. But I think it relates to either (or both) - actual browser low level implementation of Safari by Apple, and/or javascript differences.
Our website recently implemented an HTML5 multiple file uploader. Single file uploads work fine on both versions of Safari. But when uploading multiple files, it fails on Windows. We had two different upload clients & endpoints for the uploader (think A/B testing flow), and one of them provided more details that may or may not point at the cause of the problem. On one of the client & endpoints, the client would send details of the filenames & filesizes of files to upload (as JSON array object) to the server endpoint (as seen via web inspector). On Mac where it worked, filesizes were valid, on Windows, they were 0 bytes.
I think the uploader is JQuery based or some other JS library. But I'm not the dev, so can't be sure. But I have a hunch this issue goes beyond JS libraries...
I had an issue with the popup blocker in Safari in Windows XP. I guess the blocker didn't accept that the user clicked a link an Flash that then triggered a JavaScript that opened the Window. The did work in the other major browsers and Safari in OS X, though. Chrome also blocked my window in XP, but not in OS X or Ubuntu.
In Mac Safari I'm able to do cross script ajax with file:/// protocol, but in Windows Mac I'm unable to do this.
I am working on a website that has pretty standard layout. I have a box that contains other divs. It works on all major browsers, from IE6+, FF3+, etc. On Safari 5 on OSX, the box is totally to the left, outside the borders of my website. On the same safari version in windows, no problem.
I am going crazy over this.