Develop Reference

How to set width to Mobile screen size using HTML / CSS

I am developing a website Register page.
if(strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false)
With the above trap, I directed the page to a separate mobile page, where the problems started with setting the width.
in the mobile page, I tried setting the width in CSS like width="auto", width=100% and even a width element, but still the Register page occupies just 30%-40% of the screen (used align: left) and not visible.
I am using PHP and MySQL.
Please help me how to come out of this problem

Try to add this tag in the head tag:
`<meta name="viewport" content="width=device-width, initial-scale=1">`
and i advice you to use bootstrap it will be fix every thing for you

Take a look at this page: https://www.w3schools.com/html/html_responsive.asp
There is an explanation on it as wel as examples.
see: <meta name="viewport" content="width=device-width, initial-scale=1.0">

Android width:100% fix (website takeover issue)

I'm making a website skin / takeover.
It looks good on all browsers except android, where the skin image css parameter (width: 100%) is seen as the screen width not as at least the website's width. So it doesn't wrap the website but stops at the device's screen width. Please see yourself, I cannot explain very good. What can I do?
The first image is the website loaded on galaxy S3 and the second image is the website a little scrolled to see the right side. Please edit my question if you have better words.
This is the temporary link until I will move it to the client: http://csengrosseto.digitalprimes.com

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
This is the version that also controls the zoom.

Mobile Firefox ignores Viewport completely

I'm lost and can't figure out how to convince Mobile-Firefox to load my site fully zoomed out :/ I couldn't find a working solution searching both stackoverflow and the web. Here's a link to the
WEBSITE!
There is no separate mobile-version of my website. I allow zooming in and out and on iPhones, iPads and the stock Android-Browser it works flawlessly. But using Mobile-Firefox on my Android it loads the page zoomed it... and that alone isn't the main problem!
The "clickable" area of the page remains the same small "box" of the initial-zoom: I can't slide my sliders, I can't even click on pictures outside of that small "activity box" to open fancybox-links and the like. As soon as I pan my site into that little "box" I can slide, click links and interact as I should be able to.
My meta-code is the following:
<meta name="viewport" content="width=device-width, initial-scale=1">
I used html5boilerplate as a starting point for my website, do you see any conflict that could pose with my view-port problem? Another user seemed to find a solution, getting rid of another meta-tag pointing to older browsers. I find the following in my code but it doesn't matter whether I erase it or not:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
I also tried to work with the following code snippet, to no avail:
<style>
-moz-#viewport {
width: device-width;
initial-scale: 1;
}
</style>
Maybe someone knows a simple solution to this? I would be so grateful for any kind of help, advice or hint on how to tackle the problem :) Thank you very much in advance!
Cheers, Merlin.

Set the viewport width to the width you want it to be for mobile:
<meta name="viewport" content="width=640">
width=device-width forces the browser to have a 360px on Android, and 320px on iPhone.

Apparently if you set the width tag alone and set no other tags, it works.

I had a lot of work and the solution came after I inspected other sites that worked on firefox mobile. The solution was to increase the meta tag viewport:
This worked perfectly here.
<meta name = "viewport" content = "width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable = no">

Android default browser not scrolling web page

I'm having an issue with the stock Android browser on a page I'm building. Simply put, the page won't scroll vertically without zooming in first. I thought I had it figured out when I caught that the tag was reporting a smaller height than the browser window, but fixing that did not cure the scrolling issue. (The black box on the index page reports the calculated height of the element.)
My test device is a Droid Incredible running Android 2.3. Scrolling works in Firefox for Android, as well as my Android 4.0 tablet and all iOS devices.
My dev build of the site is here: www.adamjdesigns.info/csu/engage
EDIT - Other code I've tried:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
if(navigator.userAgent.match(/Android 2/) && $(window).height() < 600) {
$('html').css({'height':$(window).height(),'overflow':'auto'});
}
Any help is greatly appreciated!

Though it's a hack, I have another fix that might help developers. I found that with the stock Android 2.3.4 browser, if one increases the initial page load size up from "1" to a slightly increased size, vertical scrolling works without having to pinch zoom first. For example:
<meta name="viewport" content="width=device-width, initial-scale=1.02" />

I figured it out! There was an iframe for a YouTube video in the page, and I'm not sure if it's the iframe itself or the related scripting to play the video inside it, but removing that from the DOM solved the issue. (I had it set to hidden on mobile screens anyway.)
Thanks for your help, everyone!

FWIW, I was having a similar problem with my webpage not scrolling in Android 2.3. I used Gatsby's answer with some conditional Javascript to fixed the problem. Here is my final code:
<meta name="viewport" content="width=device-width, initial-scale=1.00"/>
<script type="text/javascript">
window.onload=function(){
var ua = navigator.userAgent;
if(ua.indexOf("Android")>=0){
var androidversion=parseFloat(ua.slice(ua.indexOf("Android")+8));
if(androidversion<=2.3){
document.getElementsByName("viewport")[0].setAttribute("content","width=device-width, initial-scale=1.02");
}
}
};
</script>
This solution first sets the normal meta viewport tag which works great with most devices, then uses conditional javascript to detect the android version and change the meta tag content to the "hacked" value (provided by Gatsby) that allows for scrolling on Android <= 2.3. This prevents the unnecessary horizontal scrolling for devices that don't need the hack.

What i found to be the problem was I had added overflow-x: hidden; to my body tag. This should turn off the horizontal scroll bar, but instead in Android it turns off the vertical scroller. And in Android, I can scroll horizontally only. Probably a bug in Android browser. I am using old android phones (HTC Thunderbolt). I went through my css file and removed all overflow-x:hidden and now I can scroll vertically again.

Try this for your viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Android WebView seems to ignore "viewport" information on web pages

I have a website that is using the viewport META tag to tell mobile browsers how to display content ( ). Viewing the page in the Android browser looks correct (and iPhone, etc).
When I load the page into a WebView component in an android Application, the WebView ignores the "VIEWPORT" tag, and renders the page at "full" resolution, which is zoomed-in in this case.

After lot's of experimentation I've determined that the Android WebView won't obey the 'viewport' setting if the actual page forces a width wider than the viewport setting.
For example, I was setting a viewport of 500px, but had an element on my page that forced a 960px width. The viewport wasn't obeyed because the WebView refused to hide that extra content.
This seems obvious when I'm typing it, but I must have spent days working on the problem.

As the docs say in the link in the best answer, you can specify using a meta tag how the device should react to the size of your web app compared to the screen. The following tag made an Android phone respect the viewport size of my web app:
<meta name="viewport" content="target-densitydpi=high-dpi" />

Try using this method of WebSetting class
setUseWideViewPort (boolean use)
I use this to tell Android webview to consider my "viewport" tag

Link in the accepted answer and this will help to understand viewport on Android.
In my scenario, fixed width is used, the solution is:
settings.setUseWideViewPort(true)
settings.setLoadWithOverviewMode(true)

Another fail in the implementation on some Android Phones ist the fact, that for example the HTC Desire HD will ignore the viewport TAG - user-scale=no completly.

Use this:
<meta name="viewport" content="width=320, user-scalable=no, target-densitydpi=low-dpi" />
Now Android WebView and the Browser adheres to the viewport settings.
Phew, this took a lot of tweaking to get right. Jeez.

I can only confirm your issue. There is an open issue at the android issue tracker. Please give it a vote/star if you're affected by this.

The only thing that worked for me was
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1.0, shrink-to-fit=no" />
but specifically adding maximum-scale=1.0, minimum-scale=1.0 to the already existing tag helped. For my specific case I didn't want to give the user the ability to zoom in/out so YMMV.