While creating a website for iPad Mobile Safari, I have a few questions;
Does the orientation happen automatically or do we have to write code for that ?
What is the best approach in terms of CSS/JS..I mean create separate copy of the web CSS for iPad and just update for iPad specific. Also what about JS?
What is the best way to detect for iPad (CSS/JS) and how?
Any online references which specifically covers iPad Mobile Safari development will also be great.
Thank you.
The orientation happens automatically, but you can write code to intercept the event and do things.
I highly recommend using an existing JS library such as Sencha Touch to handle the UI for you; they automatically detect the client and will display the appropriate scale of the app.
I just added a few meta tags to my current project, based on this page - http://www.nczonline.net/blog/2010/04/06/ipad-web-development-tips/
It made a huge difference. The orientation media queries work great. I madea simple example by setting the body background colour different based on orientation.
Related
I have a website at http://bit.ly/1h3HLVE
There are two issues I am trying to resolve regarding viewing the website on mobile devices.
The dropdown boxes in the top navbar do not work on mobile viewing (with my iphone anyway)
When I load the website the first time it is zoomed in on my mobile, and I need to zoom out to see it properly. I'd like to find a way to have it automatically open at the right size for the mobile device.
Can anyone help with either of these?
What you are trying to do is called responsive design, the easiest way would be learn a little about Bootstrap, Bootstrap is framework for design, there is a gem for rails called bootstrap-sass for easy integration, with this you can set different behaviours for different devices (this is one of the functionalities of bootstrap), you can hide for example your navbar in mobile devices and show another smaller in mobile. Bootstrap also has responsive adaptive support for images and tables, that it will change according to the width of the device dynamically.
Of course, if you are hiding items they will still loading to your site so eventually it could be a little hard to loading, you can use browser gem then, this one allow you to have different behaviors for different devises with conditionals(mobile? desktop? e.g.) and also let you have different views for each one.
Check both of them, is a good place too start and there is lots of guides for those, regards.
Does video.js support Android WebView?
We use an Android app to put a tablet in Kiosk Mode in which our web app runs. However, webview video tag does not give us a image of the first frame, only the ugly widgets background.
A better question might be whether your WebView supports video.js. You need to configure the WebView to behave equivalently to a proper browser – HTML5 video definitely won't work without some tweaking. I've found this custom web view to work well (including with video.js):
https://code.google.com/p/html5webview/
I am working on an iPad app, which has a UIWebview, which in turn hosts an html5 document that is saved locally and is not downloaded from the internet.
I am handling the rotation changed event in obj c and doing the relevant UI changes for native iOS, I have another guy working on the html5 and he says that he is handling that event in CSS, my question is:
can an html5 document loading within a UIWebview in an iOS app know that a rotation occurred? or is the iOS layer supposed to alert ( or notify ) the HTML5 layer of that?
How do people handle this situation?
Thanks.
One possibility, is to execute javascript functions from iOS.
So for instance, on your view controller's didRotateFromInterfaceOrientation method, you could in turn call stringByEvaluatingJavaScriptFromString on the UIWebView. This question talks about how to do that (Calling Javascript using UIWebView).
As far as the rotation and handling in CSS, here is a blog entry describing #media queries (https://mislav.net/2010/04/targeted-css/). I haven't tried the orientation queries, but I have used the other queries to target specific devices and screen types (i.e. retina).
i wanna to embed an animated logo in the application startup screen, this logo is already done in 2 formats of files SWF and Flash, my question is about how to embed these files directly in the application startup screen, such that the animated logo appears directly on the startup screen.
Appreciate your concern,
Thanks in advance
This is not possible. iOS does not support Flash.
Update: to follow up with a possible solution, since your Flash is just an animation, perhaps you can just render it to a video and use that instead?
First off, your start-up screen is a static image ("Default.png")... so you can't do animated stuff there.
Once your app fully starts up and the static image disappears, then you could have something animated.
In a practical sense, it can not be Flash or a SWF though (Flash files are SWF files, by the way). One can build Flash-based apps for iOS using Adobe AIR, but that's a full blown environment and IDE separate from Xcode.
It'd be smarter to do your start-up animation using CoreAnimation, HTML5 or some other fine animating framework (Unity, Cocos2d or whatever).
Or a separate video file (in which case the user has minimal interaction possibilities). But +1 to Darren for suggesting this answer faster than I could think of it.
If you are planning to publish your app on the AppStore, then what you are trying to do is Impossible !
Your best option is to create the animation you want using Core animation or you can simply convert that animation to a video and play it once your app is loaded.
I have couple of questions:
1) I am creating apps using Trigger.io and trying to make a search form that loads listview and shows data. However the UI is very distorted when i tried on android simulator and i also tested on my android tablet.
All the rounded borders and icons in list view looks very messed up. Does anyone have any solution to this?
2) How can i add ads in my apps? Can i use admob?
3) How can i scale YouTube video according to screen size?
1) Is your HTML displaying properly in browsers? Unfortunately, we don't control the HTML rendering, so you'll need to write your markup in a webkit-compatible way.
2) We have an AdMob integration in our medium-term plans
3) If you want full-screen video playback, see forge.media. For inline video, we should behave in the same way as the stock browser - if not, let me know!
1) Android 2.x has f'ugly rendering of CSS rounded corners, combined with older 2.x handsets having lower res displays leads to some really freaky looking borders, shadows and bevels. Also slows down the page a lot - I would avoid these css effects if possible if you want to target these devices.