I made a webpage in bootstrap(V3). Everything is working fine, except the XS is not triggering on XS devices that are running android. Its working fine on iOS devices. How do I get XS to trigger on android but not mess up others.
When I used JS to check the screen sizes on android phones it says 980px.
Sorry if the question is not formatted correctly. English is not my first language.
I figured it out. I was missing the meta tag in the header.
<meta name="viewport" content="width=device-width, initial-scale=1">
Related
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 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).
I am trying to set up MQ's to make a site responsive. I have it linked and everything it working fine, with one caveat the max-width: 480px doesn't work for droid. It does recognize my mobile stylesheet when I up the max-width to around 900px.
I haven't been able to find an answer to this yet, I have played around with some viewport tags:
<meta name="viewport" content="width=device-width" />
and
<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">
What is the best way to target Android phones using media queries?
One problem you might be running into is the fact that Android phones, even more so then Apple phones, have varying pixel widths.
For example, if you were testing on a Samsung Galaxy S3 or S4, the pixel width of those phones is well beyond 480px in landscape mode, even accounting for pixel density, so the media query would never fire. When it comes to some of the newer devices, you are better off to target user agent and then serve mobile queries based on that header response.
Also, see this answer for more details on testing for mobile devices.
You want to start by changing your meta tag to
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Good luck!
I just started convert my website having 'Responsive Web Design'. I installed the "Web Developer" Plug-in for Firefox ( http://chrispederick.com/work/web-developer/ ) to check, if it's working. Everything looked fine.
Now I tried this with my android phone. I didn't work correctly for portrait mode...
I tracked the problem down to wrong handling of the #media-selectors at the phone:
This page ( https://worldtalk.de/m/test.php ) generates a CSS that outputs what height/width and device-height/width + orientation the browser using as parameters.
I got the following results:
portrait, 800x1200
landscape, 800x400
The orientation was correct, the width/height and device-width/height were the same for both orientations.
But the device (HTC Desire Z) just uses a wrong screen resolution (800x1200) for portrait mode. I would like to avoid having a device database with user-agents or something like that.
Additional Information:
Browser-Version: WebKit/533.1
Android 2.3.3 / Sense 2.1
HTC Desire Z (T-Mobile firmware)
JavaScript reports identical screen resolution
Questions:
Is this only my phone model or a general behavior of the android browser?
How to fix this?
After some more investigation on that topic I found the following solution.
You need to put in the following <meta>-Tags to tell the browser to disable the scaling. Then the CSS #media selectors are working as expected.
<meta content="True" name="HandheldFriendly">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta name="viewport" content="width=device-width">
See: How can I "disable" zoom on a mobile web page?
And: http://garrows.com/?p=337 (EDIT: http://garrows.com/blog/disable-mobile-browser-zoom-function
Regards,
Stefan
-- edit --
When applying the above solution: For some devices the device-resolution reported when using "scale=1.0" is lower than the physical screen resolution and you'll possibly have effects like blurred pictures. This is caused by the higher dpi (dots per inch) of the screen. The screen size reported in JavaScript is however correct. For small screens with high resolution the correct "physical pixel" resolution can be achieved by using:
<meta name="HandheldFriendly" content="true">
<meta name="viewport" content="width=device-width, initial-scale=0.666667, maximum-scale=0.666667, user-scalable=0">
<meta name="viewport" content="width=device-width">
However, this should cause problems with screen where the dpi-value is lower. It seems safer to use the screen resolution reported by JavaScript.
-- edit --
Use commas instead of semicolons to avoid Chrome console errors about 'Viewport argument value “device-width;” for key “width” not recognized. Content ignored.'
http://royaltutorials.com/viewport-argument-value-device-width-for-key-width-not-recognized-content-ignored/
I have just developed an iPhone app using Phonegap and I now tried to post it to Android using Android SDK and guide available on Phonegap website. Everything works good except screen resolution and as I tested it on Android Emulator setting Nexus One Resolution, I found everything is too small and leaves half the screen empty. Is there a setting I need to put to make it exactly float like on iPhone?
UPDATED
I am using this viewport meta tag.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />
Use meta Veiwport tag or CSS media queries for multiple screen support
References :
http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
http://www.quirksmode.org/mobile/viewports2.html
http://www.quirksmode.org/mobile/tableViewport.html#metaviewport