I'm working on an application that will be available for Android and iPhone.
The application is done using jQuery Mobile and compiled with Phonegap.
Sometimes in the application a user can display an image, this image is very large, and needs to be scrollable.
I've done a javascript code that creates a div with theses css properties and appends it to the body:
position: absolute;
width: 100%;
height: 100%;
z-index: 1200;
background-color: black;
overflow: scroll;
On iPhone it works perfectly, the user can scroll as far as he wants on the right.
On Android it doesn't, the screen stays locked and the user can only scrolldown.
The viewport on the index.html page is like this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
I've spend about 2 hours playing with it, looking on the internet, but didn't find anything that made the screen to be scrollable on Android.
I cannot make it be another page, with a different viewport because my application is very deeply javascripted. And I wouldn't be able to bring back the user to the exact spot where he left when he wanted to view the image.
I'm running out of ideas, and have been testing it for a few days. Would someone have an idea that would help me to make a scrollable popup on android ?
Thank you
To create scrollable areas in a WebView for Android you will need to use a JavaScript framework that mimics the native functionality. There are several good ones out there:
iScroll - http://cubiq.org/iscroll-4 (I like this script)
Flexcroll - http://www.hesido.com/web.php?page=customscrollbar
jQuery Mobile Scrollview - http://jquerymobile.com/test/experiments/scrollview/
Also, note that scrollable areas are not really supported in iOS versions less than 5.0 (the user has to use two fingers to scroll in older versions).
Related
I made simple React app by "create-react-app" function (using hash-router, if it will help), and deployed it on github-pages.
But, unfortunately, non of my pages doesn't hide address bar in mobile browsers when scroll down. Height of pages of course is more then 100%.
Similar problem was there: Force hide address bar in Chrome on Android
, but there is no solution for me.
This is not a hybrid app or something else, it's just a site.
I don't need to hide address bar on load, just only when scrolling down, and pop up it when scrolling up.
I think it's just normal behaviour for site by default, isn't?
Maybe I need to add/delete something in my .html/.css/.jsx/.json files to make it workable (maybe I deleted something important for it, I don't know), but I can't find differences between my site and others sites, written on React or pure html/css/js stack.
I also tried to find information here and in internet, spent about 2 hours on it. I'm desperate.
Have learned following questions here:
hide mobile browser address bar on chrome (android)
How to hide the toolbar in Chrome for Android tablets for a 100% high website
Hide address bar in android chrome browser with scroll down gesture
Hide scroll bar, but while still being able to scroll
How to hide a mobile browser's address bar?
Found a cause. Hope it will help someone who did similar amusing mistake as I.
The point is that I embedded following code to avoid problem with background (it didn't cover whole area of page):
html, body, #root {
width: 100%;
height: 100%;}
It blocks growth of height, of course, despite visually content is more then 100%. And even if I remove #root out of this ruleset, it wouldn't help, although #root would be bigger than html and body.
Solution is to set min-sizes instead (in addition to removing #root, of course):
html, body {
min-width: 100%;
min-height: 100%;}
Sorry for disturbing, guys)
I have a web app like my image 1 below, everything looks good. The problem is that when the app is launched on a mobile that has a notch, it creates a layout problem, as you can see in image 2. And I can not use a "safe area" because some of my pages need to be stuck on top, like the image 3.
I can easily solve this by adding media queries to add a padding above the content on iPhone X, but the problem is that not only iPhone X have a notch.
Ideally there should be a JS method to detect mobiles with a notch (and return the height of this notch would be even better) But is this possible? If not, what is the better way to deal with this problem? Do I have to create media queries for every smartphone in the world ?
HTML::
meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"
CSS::
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
So, i've been struggeling with getting my website to work on phones, i'm using a grid, but once i'm trying to view it on a phone it looks awful.
I just want to scale down the desktop-version to half the size on phones.
I've been trying the old zoom:0.5; and transform:scale(0.5); but neither has yeilded me any acceptable result, does anyone know how i can fix this?
I'm using <meta name="viewport" content="width=device-width, initial-scale=1" /> right now, but i've tried without it also.
Here's a link to the website: http://7b772c72.ngrok.io/wordpress/
My grid: https://github.com/joelfolkesson/jf/blob/master/style.css
Shrinking down the content will most likely result in an illegible website on smaller view ports.
You can try media queries for your CSS to give your website the appropriate scale for the sizes defined in said media queries.
If you have not invested too much time I would suggest using Twitter Bootstrap as it already has decent cross device CSS that allow for quick and easy mobile friendly deployments.
You can check out this site that was build with Twitter Bootstrap.
UPDATE:
You want to keep the layout the same as the desktop view for mobile. But as stated above the text will become illegible on mobile view ports and that is in deed the case.
What I would suggest is that you change the CSS media query that governs your menu and logo and increase its size to be readable on the mobile view, instead of using zoom: 0.5;.
Change your logo sizing for the mobile view to about 75% and either change your menu items to 100% width or try using a different defined style for it and either put them in a grid of 3 with 33.3% width and your menu should split into 2 sections above and below or change the grid to 6 with 16.6% width and fit them next to each other and decrease your padding to allow for bigger text.
Other than that I can't help much further as your stylesheet naming conventions are very confusing to me.
Im trying to solve a problem. I have a setup, whick works perfect. Its very fluent and clean with almost native browser function(swipe, scroll etc..). My problem is, that i can't remove the url-bar in mobile-browsers, because the html and body content is not scrolling. The navigation-block and also the content-block has following the rule...
overflow: scroll; -webkit-overflow-scrolling: touch;
which works very cool on IOS and Android. I know that IOS 8+ does not allow minimal-ui any more. The whole setup is for the mobile delivery of a regular webpage. I think, that 99% will not bookmark it as webapp, so that...
<meta name="apple-mobile-web-app-capable" content="yes">
... is not helpful in this case.
Does somebody know, how i can solve this problem?
PS: The script can be downloaded here: http://www.filedropper.com/mobilenavigation
I have mobile optimised several sites in the same way using media queries - most are working fine on phones but two insist on always detecting a screen.width of 800px, no matter how small the actual device is.
Working correctly:
www.accountex.co.uk, www.legalex.co.uk, www.takeawayexpo.co.uk, www.streetfoodlive.co.uk
Detecting wrong screen size but only on mobile devices:
www.greatbritishbusinessshow.co.uk, www.bstartup.com
Even though the methods used are almost identical. The above two show correctly on all online mobile simulators, BUT use the media query for a screen width of 800px when loaded on actual mobile devices even when the device is 320x480 or otherwise very small.
Using console.log or alert these two sites always return 800px as the when alert(screen.width) is invoked - no idea how this can happen on a tiny device!
Thanks for your help!
use this meta tag
<meta name="viewport" content="width=device-width, initial-scale=1">