I design html page with an interface using css for android devices. It looks great:
The problem is that when I click on an area that opens the keyboard the resolution changes, breaking the all design.
In ios devices the keyboad floats over the browser and this issue dosen't happens.
Is there some way to avoid this or some fix to apply?
Related
I am having a frustrating CSS problem. I am building a a single page JS map application and am trying to synchronize styles across browsers/devices. I thought I did a successful job using Responsive Design Mode in Safari/Firefox. It looks the same to me when I switch between iPad/Galaxy/iPhone/desktop in the browser emulator.
However, when I actually open the page on my phone in Firefox/Safari, it does not appear the same. Specifically, the ? button is wider than the rest of the buttons below it. I specifically have the width property explicitly set to 40 pixels in the CSS.
What is happening here? Why is the ? button wider?
Here are some screenshots of what I mean:
Desktop
Desktop/Responsive Mode iPad
Desktop/Responsive Mode iPhone
My actual iPhone
I tried connecting my phone using Remote Debug but I don't really know how to use it without visualizing the actual phone screen so I can't see what I'm editing. Anyone have any ideas?
I found the problem. For some reason, padding was being added in iPhone and not in responsive mode or other browsers. Adding padding:0 to the button fixed the problem.
We are working on a webpage that is currently having issues with split screen resizing.
When we change the orientation of the page on a mobile browser or do a window resize on a desktop browser, we are able to run the required updates fine because we listen to the resize and orientationchange events that get fired with either type of event.
However, we just realized that with split screen on Android (and possibly split screen on iOS tablets), we aren't triggering any resize events for the window and therefore can't do proper updating of our elements based on the split screen being activated or updated (when the user moves the split).
Is this something we can work around or am I just completely missing some functionality that I should be using?
I have looked around online and haven't found anything related so far that I could use from our JS.
Thanks! Any pointers would be greatly appreciated.
Information about Multi-Window Feature in Android - doesn't go over any possible ways to detect it from a web view though, but looks at it from an Android app dev perspective
I have a simple form with text fields in my webview. In all the other iOS & iPhones, whenever the text fields gets focus and keyboard comes up, the webview nicely pushes the html up without any distortion. I don't even need to write any separate code for this. However, in iPhone 5S with iOS 7.0.2, the webview kind of shrinks the html, and triggers the landscape media query in my css, so my view gets into the landscape mode even if actually the phone is in portrait mode.
Is this a bug with this version of iOS or can there be a fix?
I even tried setting the height of the page as a fixed value, but that didn't solve this issue.
I have a web page that I am trying to make "friendly" to touch devices. With the proliferation of devices with medium sized screens (small tables, large phones) my approach is to make one responsive layout with CSS and javascript tweaks where necessary. This is going pretty well, but I'm wrestling with select controls.
On my android phone and android tablets, the browsers that I've tested render a friendly large dialog when I touch a select control (I still need to test an Apple device), but on a Windows 8 touchscreen laptop, I am left trying to click the little select options. Other than just making the select control a very large font, is there already an established way to make the select more friendly?
I'm thinking of detecting ontouchstart then creating a pop up div with buttons or styled hyperlinks to give an experience like that provided by Android - but then I'd need to disable this on browsers that already handle select controls well...
Anyone have any advice? (I don't have any code yet, and this would apply to any select control)
The most friendly way to deal with controls is to not touch them at all. Let the browser handle them the best way it can — unless you're providing extra functionality like you can with Chosen.js
Usually, yes, setting a larger font size would help. http://css-tricks.com/dropdown-default-styling/
I'm creating a Flash Air application for desktop. The goal is to create an app that opens up a webpage, shows virtual keyboard and duplicates the behaviour of scrolling like in iOS browser : you scroll with your finger - not with the scrollbar.
As I'm creating it on desktop, I need to scroll it with the mouse.The application is nearly complete. I'm connecting webpage with Air application using StageWebViewBridge. Now I need to create touch screen effect for scroll.
To do that - I need JavaScript. Can anyoone suggest something ?
Here's the reference : http://dev.sencha.com/deploy/touch/examples/production/kitchensink/#demo/list
PS : This is Sencha framework - suited for mobile devices. I need that kind of dragging scroll on my desctop device!
If you're looking for the same kind of scrolling like in iOS you should search for momentum scrolling. You'll find, for example, those JavaScript libraries "iScroll" and "Scrollability". Take a look, how they manage the scrolling.
Also interesting is this article on how scrolling on iOS works:
http://ariya.ofilabs.com/2011/10/flick-list-with-its-momentum-scrolling-and-deceleration.html
Hope this helps, and happy refactoring. ;)