I am experiencing some issues with a website I am trying to build. I did some research (like always) among this and other websites (as usual) and like never, I was not able to find a solution that worked for me. Please have patience with me since I am a beginner (developing for practice and learn purposes).
So here's the deal. I started building a website but I got stuck in making it responsive. After the research I was talking about earlier I used the
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0, user-scalable=no">
It works as long as I am accesing the website throught the Chrome Browser for Android. It also works in Chrome for Windows when I select the mobile view or resize the window. The only browser that acts like skipping that meta line is the stock Samsung Browser (WebKit - it think, though not sure about the name).
Is there anyone that experiences the same thing? I was thinking is only my phone (Galaxy S2) but it seems that I am not the only one with this issue.
Thanks in advance and looking forword for a solution.
LATER EDIT
Worked around with the values. Seems like the <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=10.0, user-scalable=yes, target-densitydpi=device-dpi"> is actually not ignored.
I played around with the max zoom values and it seems to work. The only issue now is that the stock android browser does not display the page acording to the #media screen and (max-width: 640px) present in the stylesheet file...
LATER (FINAL) EDIT
The css code was somehow faulty. Deleted the multiple screen resolution support and worked around only with the normal web view, then added support only for one resolution (#media screen and (max-width: 500px)) seemed to work (anyway, there are just a few devices out there that has width lower than 500). Now in regular view, the site successfully shows the content according to the CSS file. Shrinking the resolution will also display the page in a correct manner. I also noticed, that using "max-width" should be done in ascending order (first deal with high resolutions resolutions first).
Related
When a div reaches the length of about 140-150 chars then the div's font size can surprisingly change. I've created a sample - if you open it in an Android version of Chrome or Firefox, you'll see the issue. (It work well in Safari and Opera)
Please note that the JS code only add characters to the page and doesn't change font sizes!
Animated sample: https://ferenk.dev/share/samples/buggy_divs.html
Static samples (compare the look and the HTML of the first and the second page): https://ferenk.dev/share/samples/buggy_divs_simple_1.html
https://ferenk.dev/share/samples/buggy_divs_simple_2.html
If you put the same text to a textarea then its size will not change.
Notes
There are some workarounds like using display: inline-block, but I need the features of the block display.
You can play with the font size, too, and it sometimes helps. But the issue can reappear after another change in a more complicated layout, and you will not know why.
The trick of <meta name="viewport" content="width=device-width, initial-scale=1"> suggested for another similar issue doesn't work either.
I don't know if it's a real browser bug, but it's very strange. My test pages are so simple that they should be rendered correctly. I've never experienced this problem with desktop browsers. And I had some tests with IOS (Chrome, Safari) and it also seemed to be OK.
I hope that this is just a "feature" of the browsers which can be disabled easily.
This is my first legit website I'm working on and I can't get this simple thing to work. Here is the code on pastebin:
https://pastebin.com/CEU74Fx6
Here is some code to bypass the error notification.
<div class="container-fluid" id="intro">
(I am so sorry for linking pastebin but it is a lot of code. Please understand that trying to format it here was way to time-consuming and pastebin highlights HTML elements anyways).
On my desktop bootstrap works perfectly and resizes as it should. Here is a short video of how it resizes correctly.
https://streamable.com/pynkm
In regular view mode (the first part of the video) the elements are aligned correctly. When I go into responsive design mode, the elements also align correctly.
But when I upload the website to my server, and test it out on my phone (Samsung Galaxy S7 Edge), the elements align incorrectly.
Android Firefox:
https://i.imgur.com/ccjgYSR.png
Android Chrome:
https://i.imgur.com/gjCIW3t.png
As you can see, the elements align as if they were in the phone browsers desktop view mode (it's not in desktop view mode).
I tried this on someone else's phone and the same thing happened.
Is this a bootstrap bug? Is my code wrong?
Replace this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
with this one:
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
That should tell your phone not to shrink-fit.
Another mistake I see there: You seem to be using Bootstrap rows without a container. Bootstrap rows always need a .container or a .container-fluid around them to work properly.
I've read a few of the related StackOverflow questions:
here, here and here,
but I feel like I am still without an answer.
I have a great responsive design (very simple), that looks great however you re-size the browser on desktop. Now when I inspect the element via Chrome and use their phone preview, everything is so small and tiny. The background doesn't stretch like it does on desktop. The main content doesn't fill the area like it does in the desktop, even when the browser is re-sized to be the same resolution as a phone's.
Yes, I've included the viewport specifications.
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
Honestly, no matter how much I play with the width, it doesn't seem to change anything - in the desktop browser, or on mobile.
Why does a webpage look completely different in a phone's browser than it does in desktop with the browser shrunk to the exact same resolution?
Maybe the user-scalable=0 instead of no?
content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0"
We developed an app with WebView. I thought I got everything to display to full device width until we tested it in a Nexus 5 running KitKat. At first I couldn't get the page to shrink on any device and fit without scrolling until I implemented the following:
<meta name="viewport" content="target-densitydpi=device-dpi, width=400px">
Target-density is the only thing that had an effect on changing the display size that I could find. And it worked... until Nexus 5 with KitKat. When displayed in the Nexus 5 it does the opposite now, it shrinks and I can't figure out how to display it to full width. I started looking again and found:
Viewport target-densitydpi no longer supported
Previously, WebView supported a viewport property called
target-densitydpi to help web pages specify their intended screen
density. This property is no longer supported and you should migrate
to using standard solutions with images and CSS as discussed in
Pixel-Perfect UI in the WebView.
Source: http://developer.android.com/guide/webapps/migrating.html
When I use this:
<meta name="viewport" content="width=device-width">
It displays too big again with scrolling bars and all the other devices would do the same thing.
I've found solutions (can't remember them anymore) that would work with Chrome and other browsers but not with WebView. Webview seems quite strict.
Any ideas how this can be remedied?
Try to add viewport meta tag in this manner. Hope it works for you in all the browsers.
I developed an app using Adobe's Phone Gap, mostly checking it on mobile Safari, Desktop Firefox and Desktop Chrome, but when I checked it on Android High Resolution Devices (HRDs) all of my fonts and measurements (calculated in REMs) were half as large.
I tried fixing this with:
#media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution:2dppx){
html{
/*font-size:125%;*/
}
}
...but while it made Android HRDs look normal, now iOS HRDs devices look overly large. What is the best way to correct this discrepancy? I looked into Android-specific media queries, but that would mean adding like 20 of them and there is no guarantee that they would be affecting Android devices specifically.
Add this meta tag in your head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
According to a talk by Mike Stamm at CSSConf the problem was actually in the target-densitydpi attribute in the meta viewport tag, which Android uses, but Apple ignores. It should be:
<meta name="viewport" content="target-densitydpi=160">
Apparently that solves the problem with most Android devices, (although some Android devices require target-densitydpi=140).
Related: that video linked above has some interesting historical reasons behind the differences in iOS and Android displays.