This is an extjs single-page application which works fine in FF, IE, and Safari.
There are several problems with viewing or using this extjs app in the iphone. The extjs panels/windows do not resize, as it would in a normal screen. When the user zooms out, the expanding viewing area is blanked out. An example image is below:
Iphone does not recognize the combo box of the extjs.
Unable to scroll down.
Viewport Issue:
The main issue is with the viewport. It does not scroll or zoom properly in Iphone.
Ext JS is not (and will likely not be) optimized for mobile devices. That's the purpose for Sencha Touch, which is the mobile framework built on Ext JS and specifically intended for iPhone and Android. I doubt you're going to have much luck resolving these types of issues using standard Ext JS.
We have experienced the same kind of problem with ExtJS and iPhones, and a slightly different, yet comparable, problem with android devices. I guess that those browsers report the screen size in a way that confuses ExtJS, so the layout mechanisms do not work. Since Sencha Touch has a similar API like ExtJS, making a Sencha Touch version of your software is probably the smartest way to make it work properly on iDevices and Androids.
Rather than using viewport, I used a column layout panel container. Most of the extjs stuff works fine. I placed this container layout into a div and specified its height and width. Also, <meta name="viewport" content="height=700" />.
Related
I finally have my site working the way I want it except for a bug that seems to only be with ios devices. I set the css on images on this particular page to be object-fit: contain. The picture should be displayed like this:
on Android and PC
But whenever I open the website on an iphone or an ipad I get this:
IOS
This is affecting the sites animations and really just looks very choppy because of it on iphones. I'm not sure how it could be working so well on android devices and just generally but still persist like this on IOS..I tried different browsers as well no use.
What's even more interesting is that on initial load you will see the incorrect css applied on the image, but after refreshing the page it loads the image with the correct dimensions. I'll appreciate any insight I can get regarding this issue.
Feel free to check out the repository: https://github.com/physicalrobot/vikalpaWebsite
And see the bug for yourself on an iphone or ipad at www.vikalpa.xyz/projects
I tried changing the css of the images to force them all to have a width: 100% and a height: auto.
I tried changing object-fit to anything else in the browser while using web-inspector on the ipad, but still couldn't get it to change.
The web page found here renders well in the BlackberryOS 10 Webkit browser within the VMWare Fusion simulator, but not on an actual device (I'm told, I don't have a physical Blackberry in front of me).
The first screenshot is what I'm told the page looks like on BlackberryOS 10, the second is what I see in the emulation. I tried it on all 6 device sizes provided by the Blackberry Simulator and it looks good.
Edit: This seems to have something to do with the Blackberry Keyboard
Ideas?
The Blackberry keyboard seems to displace the size of the actual page outside of the viewport. Opening the keyboard is the only way to replicate this issue within the simulator.
I tried to compensate changing media queries to use the max-device-width and min-device-width properties as well as using units relative to the viewport (vh and vw), but it just wasn't perfect on all devices.
I used the following JavaScript to load a stylesheet for only BlackBerry devices:
var ua = navigator.userAgent;
if (ua.match(/(BlackBerry|Blackberry|blackberry|BB|bb|RIM|rim|Playbook|PlayBook|playbook)/)!=null) {
document.write('<link rel="stylesheet" type="text/css" href="blackberry.css">');
console.log ('Blackberry confirmed');
}
The only issue with this is that the Blackberry simulator's userAgent cannot be targeted with a regular expression because there's nothing unique about it. The code above does target all physical BlackBerry devices though.
I am using Bootstrap3 css/js files to make my html page responsive for all kinds of screens (iphone, android, tablets, ipad, desktop).
It works fine on desktop and mobile devices but it's not 100% correct on iPad/Tablet. There are 2 issues with iPad/Tablet:
1. Responsive image for Tablet/iPad is still not fit to screen
2. font size of the text is small
Is it default behavior of Bootstrap3 or am I missing something?
I have a website optimized as a web app with iOS safari, so that adding to home screen opens the app in a separate Webview. However, it always opens in the 3.5" letter boxed mode, instead of stretching to fill the screen. I know that with native apps, you just have to add the iPhone 5 sized launch image. How can I do this for a web app?
I found on this post that all that is required is that you remove width=device-width from the viewport meta tag. The blog talks about specifying a startup image, but this appears to be optional.
Edit: Original source of answer is Max Firtman. He indicates it may be a bug as well (see comments), but for now, this solution works.
I am building a small app using PhoneGap HTML/CSS. Now my problem is that position:fixed (used on a top bar) works on iOS 5 but not on iOS 4. Someone knows a fix for this?
Position:fixed doesn't work on iOS before version 5 and some other mobile browsers. There are a lot of solutions out there for this, but one that I can personally recommend is GloveBox written by Nitobi's own Jesse MacFadyen. It lets you define areas that are scrollable, and I believe in your case that would be the main content, while the top bar isn't scrollable.
Another advantage of this approach is that the user won't be able to "scroll out" of your app's view as if it were a normal website on Mobile Safari.