Im currently developing a WebApp for the iPad, now it depends on the viewport (screen-width and screen-height)
Im currently looking to somehow make it dynamic so when the user rotates the ipad, it actually resizes the viewport of the page
Has anyone done this or attempted it and been successful, i would think its just a small snippet of Javascript
Have you tried using: "device-width" ?
https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19
Just meta viewport and CSS. Here is a demo (although it rearranges rather than resizes, the principles are the same).
Related
I'm using the webkit-overflow-scrolling:touch property on an iOS/Android WebApp and it works in most cases and provides a native scrolling experience without Rubberband Scrolling.
Now the issue is, when the div that needs to be scrolled isn't tall enough the rubberband scrolling will happen again. I tried setting height:100% but that didn't help either.
Any ideas?
I've come across this when I made a Cordova iOS app. You can fix this by applying min-height: 101%. Though, that would make your page scrollable for a minor distance but it will trigger the desired effect you're looking for.
Im struggling with a responsive design.
Everything is sized in percentage, and is beginning to work aprox as intended on "regular" screens.
Via javascript I determine window width and height, which sets the background image.
The background image is using the css3 "cover" property.
BUT everything apparently is messing up, on iPad/iPhone.
When the pagecontent overflows the pageheight (which most of the pages do, and are supposed to) then the "cover" property apparently expands and shows the image way too big.
And height and margin-top are suddenly set way too high.
My guess is that iPhone/iPad is considering the entire content including the overflown content as the full page height, and not just the actual visible screen.... But I dont know how to deal with it.
Also, when I alert out the window width, I get: 980 on iPad, iPhone4, and iPhone3. which I guess suggests that I cant use window width, on iPhone/iPad....?
How do I deal with the mobile setup?
My hope was that I wouldnt need to create iPhone/iPad specific setups... but I am beginning to fear that I need to?
Here is the playgroundwith the design: http://basix.popweb.dk
Any help or advice?
Thx
JOhn
Well, I've just checked your website on an iPhone and it seems to load ok, however the layout doesn't seem to responsive to me.
Anyway, are you using any CMS?
Also, as I learning material, I advise you to check http://themble.com/bones/
Even though it's a wordpress theme, the stylesheets are very well exmplained on what works what. Nevertheless it uses SASS or LessCSS (CSS preprocessors) which I advise to learn because it will save you a lot of time when writing CSS. It isn't hard at all, I've learned LessCss in about 2 hours http://lesscss.org/.
I'm developing a web-app, based on the Dribbble API. In this app I have a div which shows all comments with a max-height of 200px, so if there's more than 200px worth on comments, the div gets scrollable. So far so good, works as intended on iOS.
However, when I add a Scale transfrm to this div (to mimic iOS's folder opening animation), scrolling the div breaks entirely. You can see the live version here: http://maxsteenbergen.com/longshot/
Is this fixable by setting a a new style using jQ's webkitAnimationEnd or is this without solution?
EDIT: In the meantime I found that using two fingers to scroll the div works but obviously, this is not how it's supposed to work.
It's also worth noting that scrolling DIV's don't work on older versions of iOS - it might be worth having a look at iScroll.
You can implement native iOS UI and achieve much better UI feedback. especially on scroll view. To obtain data from Dribbble API you may use 3rd-party Dribbble iOS SDK: https://github.com/agilie/dribbble-ios-sdk
I am very new to HTML5 development for ipad. I am creating my first application for ipad using HTML5. Everything is done except I am facing one problem. Problem description is.
There is one vertical overflowing div. This page is viewed properly in computer's browser but when the same page is viewed in ipad the overflowing section is cutoff and it appears that there is no overflowing content.
Please let me know the proper way of doing it.
On the iPad scrollable div's using overflow scrollbars will not appear on that div. The only way to scroll is using a two finger swipe.
Joe says that Scrollability is not yet ready to be used, so I wouldn't implement it in a production system.
To do this you have other options like:
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
You want native-like scrolling on the iPad in your HTML5 application? You might want to check out a project called Scrollability by Joe Hewitt: http://joehewitt.github.com/scrollability/
Check out https://github.com/appmobi/aux_web (aUX_webScroll) . I'm the author, so if you have any questions, let me know.
iOS5 has the new property to allow scrolling on divs, but you'll find out that when you use it in a webview, the whole webview moves too and surprisingly, not everyone upgrades the OS.
I wrote an article about new features in iOS 5. Also this topic is covered on section -webkit-overflow-scrolling: http://samuli.hakoniemi.net/ios-5-and-new-features-for-web-developers/#webkit-overflow-scrolling
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.