So i have a website and everything works fine on PC but when you open it from a phone the website is moved by the navigation menu of the mobile browser. The height of the website is exactly 100vh but displaced by the navigation bar
This seems to be the solution to your problem:
https://chanind.github.io/javascript/2019/09/28/avoid-100vh-on-mobile-web.html
Basically use javascript with window.innerHeight instead of CSS
Related
Edit:
This is for a hybrid mobile app made with Ionic 4.
On smaller devices (even smaller than the image attached) the inputs are covered by the keyboard on Android and iOS. Lets focus on android for this question.
At this stage for this project I do not want to use stripe elements.
I have looked for ages on this and even contacted stripe support but have found no solution.
I have attached an image of the problem (it is worse on smaller phones) and also an image of how it looks if you open it in chrome on a mobile browser.
My options now seem to be:
1) Hack the css
2) Try and figure out how to get it to display like it does in the mobile browser (2nd image) as this is much more responsive to device size.
Legacy Checkout should always open up a new page/tab and fill the screen like in your 2nd screenshot. The only exception is if the page has been configured to be in "web app" mode.
Do you happen to have the following metatag on your site?
<meta name="apple-mobile-web-app-capable" content="yes">
If so, if you remove it then Checkout should behave as expected.
Another solution is to use the new Checkout, which always opens up a new tab: https://stripe.com/docs/payments/checkout/client
I am using OpenSeaDragon to show images on my website. With the desktop browser everything is working correct. Also in device mode with the DevTools from chrome. But when I switch to a real mobile device, I can't change to fullscreen mode.
The view try to expand, the buttons slide to the top, but cancels itself immadiately.
I have build a small Android application with a webview to access the website.
I even don't know, if it is a Android issue or an OpenSeaDragon issue. Any hint what I should check could be helpful.
Thanks in advance
I am working on a hybrid application.
My webpages are responsive when i check them in browser inspect window on iphone screen.
But when when i used them in ios, it does not remain responsive anymore.
Any idea about problem and solution?
The same issue is resolved in android by first zooming out the page and the zoom in according to screen size. But it is not working here.
We have created a mobile view page on my website which show a text-area towards the bottom of page. In most of the mobile-devices/browser, the page work fines and the text-area is slides up when keyboards comes up.
But, in HTC One V (Android 4.0.3) default browser the text-area does not shift up and hence is hidden behind the keyboard, so user can't see what he is typing. Though on same device using chrome it is working fine.
Please note that this works correctly in default browser in android 4.1.2 (Galaxy S3)
Any help to solve this issue would be appreciated.
EDIT:
This is mobile view for a website not an android app.
You have to specify the android:windowSoftInputMode="adjustResize" in your Activity
You should addandroid:windowSoftInputMode="adjustResize" in Manifest file which will resize the window or adjust the window accordingly.
For xml solution: Visit my this answer
I am building a page for Android, and it uses CSS. The phone I am testing on right now is ICS. I've found that in the native browser, when i click on a div with a higher z-index than the page I actually activate the elements behind the divs. This means that I inadvertently tap ads and links that take me off the page.
This does not happen on the ICS chrome browser though. Does anyone have an idea of what I can do to remedy this so that my div is what gets tapped?
Thanks,