I have a site with an element that is 100vh:
height:100%; /* for older browsers */
height:100vh;
This works fine on the desktop browsers I tested it in, as well as in Chrome on Android.
But both in Firefox on Android and the default Android web browser, the element is somewhat taller than the browser tab, maybe (eyeballed) as tall as the window plus the tab header.
Why is that so, and how do I avoid it?
100vh is 100% of viewport height and 100vw is 100% of viewport width.
Related
I am having a problem with Chrome on android mobile phones where an element on my webpage that is 100% width and height is going beyond the viewport?
It seems to work no problem on Android Browser, Firefox for Android, Chrome, Firefox and IE on desktop.
Link to my website: https://www.codesmite.com
If you shrink the page to a mobile size you will see the sidebar menu hides away off screen and a menu button appears to bring it back. When you click the menu button the sidebar transitions across to 100% width and height and the content transitions off the screen to the right. I have overflow:hidden so the content should not be stretching it wrapper but instead leaving the viewport, which works.
For some reason on Chrome for Android the 100% height of the element reaches all the way to the bottom of the page (It isn't fixed anymore, if you scroll down the menu items disappear). The width also stretches beyond the viewport width to the edge of all the overflowing content?
I can't work out what is causing this?
On your <div id='content'> you have
#media only screen and (max-width: 749px), screen and (max-height: 549px)
global.min.css:1#header:target~#content {
left: 100%;
Delete left: 100%; and will work;
Or add CSS: div#content{display:none;} when you open menu, both works for me.
I've created a simple application using Phonegap for android, that simply loads my website's content. The problem is webview doesn't understand the "REM" css units, even though on the same device when I open the website in chrome browser it works as expected.
The technique I'm using is I set the root font-size in pixels (for example 1px), and everything else using rem units. It looks like when using webview, it has some minimum value for font-size which is far bigger than my value and it multiply all elements sizes by 10-12 times.
Is there a way to fix it without switching to pixels instead of rems?
Code example:
body {
font-size: 1px;
}
.element {
width: 15rem;
}
From the code above, the width of the element should be 15px, which is correct if I open the website in mobile browser, but in webview its bigger than 150px;
UPDATE:
I'm almost sure that it has a minimum font-size issue in webview, because I tried the opposite now, I set the root font-size to 15px and .element width to 1rem and it shows everything correctly, means REM units are working if I set root font-size above the minimum limit in webview.
Here is how my website looks in mobile chrome
[]
Here is phonegap application
Webview increases the minimum font-size by default. This solution works the best for me. Now webview acts like most other browsers with rem units. :)
https://stackoverflow.com/a/41496408/688352
On especially Apple Ipad air, or ipad mini (retina) these site goes completely dark gray for approx. 30 seconds, before the site appears.
On PC/Mac or most smartphones, along with android based tablets, the page layout renders nicely.
I've narrowed it down - I hope - to CSS "position" of the wrappers.
If I remove the position: absolute; on #hoejrewrap and #hovedwrap, and position: relative on #indholdsramme, the problem is solved, but introduces overlapping divs on tablet or zooming in/out in all other browsers.
Any clues?
Trin
I am mid-way through re-coding my current site and I have come across a mobile compatibility problem.
If you view the current website via mobile device (here) you can see the width and height of the website is normal sized as it would be when viewing on a desktop with the ability to scroll vertically and horizontally.
However, on my new site (using bootstrap slate from bootswatch - bootswatch.com/slate/) when you preview it on a mobile device it tries to squeeze it all into the fixed mobile device width (here)
I have tried adding the lines below, however I don't see a difference.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
html,
body {
height: 100%;
width: 100%;
}
Is there any way to make the new site to be shown in the same dimension as the current one in mobile devices?
Thanks.
What you see is the responsive behavior of bootstrap I guess. And imho it definitely makes sense to fit the content into the device width on mobile devices.
You can read about disabling the responsive feature in your bootstrap project here: Disabling bootstrap responsiveness
UPDATE:
To make your content horizontally scrollable add:
html, body {
overflow: auto;
}
to your stylesheet.
If this doesn't work try adding !importantto the declaration:
html, body {
overflow: auto !important;
}
NOTE:
This is not the most efficient way css-performance wise, but given your comprehension level of CSS, I guess it would be too much for your to alter the bootstrap.css yourself.
For Bootstrap it self the steps on disabling responsiveness are below. You can download template/CSS with this disabled. Check out http://getbootstrap.com/getting-started/
Steps to disable page responsiveness
Omit the viewport mentioned in the CSS docs
Override the width on the .container for each grid tier with a single width, for example width: 970px !important; Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the !important with media queries or some selector-fu.
If using navbars, remove all navbar collapsing and expanding behavior.
For grid layouts, use .col-xs-* classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.
You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed). This disables the "mobile site" aspects of Bootstrap.
I'm working on a webApp that should resize to any screen size a device could have. On iOS and older android versions the viewport tag works fine. The picture on the screen is always resized to fit the screen.
(Like described here: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html#//apple_ref/doc/uid/TP40006509-SW19)
On the Galaxy Nexus (Android 4.0) it won't work. On the left and right side is about 20px space and I don't know why he does this.
My viewport tag looks like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
No matter what I change about the tag, the space is always there and the content doesn't fit to screen.
I've made a sample page to show you the effect: http://easyeve.w3y.de/link/index.html
If you open this link on an iPhone the content perfectly fits (you won't see anything yellow = body) and the document width is 320px. On the Galaxy Nexus you will see yellow space and the document width is 360px (which is exactly half of the display resolution). This should be 320px too!
Do you have this problem too and is there a way to fix it?
Update: I've noticed the same Problem on Galaxy Note / Android 2.3.6
Therefore it's not an Android 4 issue. It has to do with the large screen size I guess..
The very same issue here (Galaxy Nexus - Android 4.0.2), I am talking about regular web page in the default browser
Setting viewport meta initial-scale less then 1 (zoom out) seems to be ignored by the browser. Higher values than 1 (zoom-in) works fine.
There are settings in the browser (settings->advanced) where you can change things:
Default zoom - it makes difference, but it does not fix the issue
Auto-fit pages - in my case makes no difference
Everything seems to work just perfect in Chrome browser (beta at the moment), but that is not default browser for ICS / Galaxy Nexus.
UPDATE (solution):
Setting meta viewport "width=device-width" fails on Galaxy Nexus.
Setting viewport "width=1280" works just great (1280px is width of the screen of galaxy nexus).
Beware that setting "width=1280,user-scalable=no" breaks it again (you can zoom out even if there is user-scalable=no) :(
I ran into something somewhat similar on a Galaxy Tab 2. When setting up your WebSettings for the applcation, try setting webViewSettings.setUseWideViewPort(true); This will force Android to consider the viewport meta tag. It was being ignored in the case of the Galaxy Tab 2 for my app and everything in the viewport was drawing incorrectly until I changed this.
I ended up wrangling with this problem today. My issue was a little bit more complex, because I had to deal with a Wordpress stylesheet (from another theme) in addition to the base CSS. Chrome worked perfectly on my phone and tablet and the stock browser worked fine on the tablet, too. However, the stock browser kept zooming out and showing me the desktop view. There were no margins on either side, which was the correct behavior, but the browser should have removed the floats from my sidebar and content divs and zoomed in to the main content (I'm using #media queries). As weird as it sounds, I actually fixed this by first setting the Zoom setting to Far, refreshing, and then resetting Zoom to Medium and refreshing.
I should point out that when I looked at your page's HTML and CSS, I noticed that you set a specific pixel width for your page div. I'm pretty sure you need to use percentages for width instead. For example, my centered content div has margin: 0 auto;, min-width:320px;, max-width:900px;, and width:100%;.