I built a responsive website (http://www.cjkrause.de/borgo-v2) which behaves strangely on both android and ios smartphone devices. I have a navigation bar that seems to force the browser to shrink the whole site in order to fit it into the window. But there is no width set on this bar, so it should just rearrange its content to fit it on the screen.
I already have this in my header section:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
See here how it shows on my android phone:
android appearence
On a desktop browser, even in responsive emulation, everything works fine.
It looks to me as if the problem is with your map towards the bottom of the home page.
It's in an iframe with a hard coded width of 600px, so it doesn't scale down on smaller viewports and causes other elements on your page to expand.
Related
I'm trying to write a responsive website that set's the maximum height to 100% and everything is on-screen without needing to scroll. Setting {height: 100vh} works on a flex box in the desktop. However, when I view the site on mobile, then it scrolls, ignoring the height of the browser tab in chrome. I would like to set the height to something like {height: calc(100vh - address bar)} so that it shrinks the height of the document so everything fits without scrolling or hiding the browser tab.
Have you included the viewport meta tags in the head of the web page. From experience this can change the effect that certain CSS has on the mobile version.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
If that's doesn't work out, perhaps use media queries and use 100% instead of 100vh.
With an ionic/phonegap application I've this issue (Only on iOS).
When the user need to write something o select and option the iOS control (keyboard or dropdown) appears and when it does the web-view is compress to half. I'm using vh and vw measure unit in CSS.
What I've done/tried:
This post in ionic's forum The OP solved it by changing vh and vw units back to pixels. That's no a solution for me.
Ionic keyboard plugin using the method cordova.plugins.Keyboard.disableScroll(true); didn't work. Tried with false and true.
Add parameters to the meta tag Non working. My current meta:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
Image when keyboard is hidden:
Image when keyboard is shown:
On the 2nd image you can barely read left text - right text because the height for the input is 24vh.
I create a dummy page where I do not use vh and vw and this works ok. On Android works fine too. It seems that when de keyboard or dropdown comes up the height of viewport is resize and vh size adapts to it.
Since I can't change it to px I'm looking for other alternatives
The parent container(s) that holds the input element cannot contain height:100% or 100vh on iOS if thats what you are trying to do. I had this similar issue on iOS timepicker reducing the screen size and showing blank just like yours.
This usually happens if the keyboard height is half compared to the screen height of iOS device. On larger screens like iPhone 6, this issue doesn't happen.
I used min-height:480px and height:100vh on the same container that gets resized. It fixed my issue on the smaller devices.
This cordova.plugins.Keyboard.disableScroll(true); is not required.
Let me know if this works for you.
I have a somewhat-responsive Bootstrap website. Above 1200px, the container is 1170px wide and below that, it scales down to 970px. Anything below that will also get the 970px version.
In my meta tags, I have this:
<meta name="viewport" content="width=device-width, initial-scale=1">
Everything works perfectly on Desktop computers as well as on iPhone or iPad devices. However on Android based mobiles like Samsung Galaxy (where the viewport is 360x640px I believe), the website shows fine too in landscape mode, except that it is zoomed in every time a page loads. Meaning it shows fine, but the user would have to scroll left and right. The user can zoom out and then it shows full-width without having to scroll, but the next time a page loads, the same happens again.
Is there any simple way to adjust/fix this?
I tried removing the width=device-width part, but that messes with the design on iOS devices and 1px lines don't show properly.
Try using
#media (whichever desired screens)
html{zoom:0.7} // this value is not calculated just an example
You can calculate using device width / your html width
This is has worked for me .. i need to zoom out on tablets so i added this..
We are designing a banking app. I am working on the design. We are using only html and css and a very tiny bit of javascript (all client side, anyway - server side obviously is different).
The app loads in portrait orientation. When rotated to landscape, all ratios are kept. However, on rotation back to portrait, everything get's resized to a very tiny size. I equate it to when you zoom in on a web page, and on reload the page goes back to it's normal size.
All the styles are kept - almost everything seems fine, except everything turns out really tiny, like an entire 2000px web page has been loaded to fit in the screen.
(Need ten rep points to post the images... sorry)
What is causing this, and how can I fix it?
Try adding this to the "head", if you haven't already:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=medium-dpi, user-scalable=no" />
I'm currently developing a mobile stylesheet for a website and I'm experiencing a strange problem I can't explain:
Even though there are no "width" definitions in my stylesheet anymore the Android browser leaves a huge amount of empty space on the right causing scroll bars to appear.
I have no idea what causes this as there are no elements and the width is not explicitely set to anything.
Have you added the meta tag to your <head>?
<meta name="viewport" content="width=device-width">