Develop Reference

Why doesn't capture="user" change my phone's camera to front facing?

I tried the following attribute capture to set the input element to try to select the front facing camera. user is front facing, and environment is back facing.
However, while experimenting with Chrome (latest) on mobile (Pixel 1, latest OS), the back camera is still selected.
I used an example snippet:
<form action="server.cgi" method="post" enctype="multipart/form-data">
<input type="file" name="image" accept="image/*" capture="user">
<input type="submit" value="Upload">
</form>
(from https://w3c.github.io/html-media-capture/#the-capture-attribute)
I am able to change accept to require video on my phone, so that and other attributes work, but not the capture attribute.
EDIT: Am using the latest Android Chrome browser. The following page implies that iOS and older versions of Android Chrome cannot use capture altogether, but otherwise can use capture. https://caniuse.com/#search=html-media-capture

I cloned the chromium repository today (2019-07-21). I then used ripgrep to get a list of files that do not contain capture. After passing that list to rm, I removed any directories that were either empty or clearly irrelevant (such as telemetry). Going through the remaining ~50 files was a relatively trivial task.
Hopefully the Chrome team will get around to implementing this in the future, but there is currently no indication that this behavior is supported in official documentation, official blog posts, or the code itself.
I know it's not the answer you'd like to hear, but those are the facts as I've found them.

Would it be Chrome specifically that hinders the code from working properly? I suggest using a different browser such as Firefox in order to test this theory. If it does succeed on Firefox, then the simple answer is: Chrome has yet to implement it yet.

Here are some tests, I included user agent:
Didn't worked with :
Android Chrome: Mozilla/5.0 (Linux; Android 6.0; Ilium X510) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.143 Mobile Safari/537.36
Android Firefox: Mozilla/5.0 (Android 6.0; Mobile; rv:68.0) Gecko/68.0 Firefox/68.0
Worked with :
IPhone Chrome: Mozilla/5.0 (iPhone; CPU iPhone OS 12_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) CriOS/75.0.3770.103 Mobile/15E148 Safari/605.1
IPhone Safari: Mozilla/5.0 (iPhone; CPU iPhone OS 12_3_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.1.1 Mobile/15E148 Safari/604.1
In Summary:
All tested iPhone navigators displayed the front camera view when capture is user, and back camera view if it is environment.
Both tested Android navigators displayed always the back camera view.
So regardless the information in the accepted answer, it doesn't seem to be a browser issue. It would be helpful if it works correctly with an Android device and a specific browser.
I hope other people can share tests on their Android devices, in particular on working ones, displaying front camera view while testing the capture="user" attribute-value.

How do I correctly implement Android Viewport Spoofing?

I've recently built an app that uses a full screen web view to load a website I don't own. (Therefore, no control of site code)
I need the webview to display a desktop version of the site, and desktop http header spoofing didn't do the trick. I found that it's the viewport size that determines whether the site sends mobile or desktop, due to the site's responsive design rules.
On my Pixel XL, this code causes the page to look right:
webview_chart.getSettings().setLoadWithOverviewMode(true);
webview_chart.setInitialScale(200);
webview_chart.getSettings().setUseWideViewPort(false);
webview_chart.getSettings().setMinimumFontSize(16); String newUA= "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.45 Safari/535.19";
webview_chart.getSettings().setUserAgentString(newUA);
webview_chart.loadUrl("http://tradingview.com/chart");
The three things that seem to be key here are
WideViewPort must be false (or I get mobile view)
InitialScale = 200 makes it display desktop on my device, but things look tiny and far away. Therefore:
MinimumFontSize = 16.
Now, this causes everything to look fine on my phone, and other devices with a similar screen size, but smaller screens have issues.
On my wife's original Moto X, InitialScale 200 still gives mobile site. Changing that to 150 and reducing font size a bit makes it look perfect on the Moto X, but then on the Pixel, things are too small and spaced far apart, as if margins are larger on everything.
How can I make this webview display correctly in different screen sizes? I'm not even sure that the code I'm using is best practice for pulling off such a feat. I just hacked it together and found that it worked to show a rightly sized desktop view (Tons of late night trial-and-error). But it turned out to not work on other screen sizes.
What can I change to make this flexible, or adaptable, or responsive, in dealing with the website's responsive design rules?

You need to set the viewport because the target website appears to be using responsive design based on dimensions of the viewport and not based on HTTP request headers. This approach is a common CSS practice.
You may find thorough documentation here:
https://developer.android.com/guide/webapps/targeting.html#Viewport

How to request desktop in a webview?

I searched Google and stack exchange and found about 15 different solutions, none of which work. They either throw syntax errors upon compiling, or they just don't work on the website I'm requesting. (Tradingview.com/chart)
When I go to my target website in chrome and click Request desktop, it works fine. In the webview in the app I'm building, it doesn't work. Google displays as desktop, but my target site does not. However, it does display properly in chrome or Firefox, just not my app.
What I tried:
Every solution provided here: Setting WebView to view Desktop Site and Not Mobile Site
Including this library https://github.com/delight-im/Android-AdvancedWebView/blob/master/README.md
This
How to open desktop site in webview in android
That
How to load Desktop view instead of mobile view in webview
The other
setUserAgentString in Android webview has no effect on HTTP header used in loadURL()
Most of those don't cause any change (on my target site), while a few of them throw syntax errors, sometimes up to 13 of them.
I tend to see comments being left saying something to the effect of, "Contact the website owner to make them change their site." That's not an acceptable solution, and is unhelpful without further explanation. How is it that in chrome, Firefox, Opera, etc. I'm well able to see a desktop version of the page, but it isn't working on the webview? This needs to be explained if the only answer is that it's"the website's fault contact the owner."
Right now I've got this in here,
WebView webView = (WebView) findViewById(R.id.webview);
webView.getSettings().setJavaScriptEnabled(true);
webView.setWebViewClient(new WebViewClient());
webView.getSettings().setUserAgentString("Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.4) Gecko/20100101 Firefox/57.0");
webView.loadUrl("http://facebook.com");
This works fine on Facebook.com for example, but not TradingView.

After much trial and error, I came to a solution. This isn't perfect, but much closer. (Maybe comments can help correct my code where I've fallen short)
webview_chart.getSettings().setLoadWithOverviewMode(true);
webview_chart.setInitialScale(200);
webview_chart.getSettings().setUseWideViewPort(false);
webview_chart.getSettings().setMinimumFontSize(16);
String newUA= "Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/535.19 (KHTML, like Gecko) Chrome/18.0.1025.45 Safari/535.19";
webview_chart.getSettings().setUserAgentString(newUA);
webview_chart.loadUrl("http://tradingview.com/chart");
What this seems to do is spoof a larger screen size, which causes responsive design to send desktop version rather than mobile. It's not perfect, as you can see I have to adjust minimum font size up so things are readable, and on smaller screens it still doesn't work.
But that's the reason you can send desktop headers and still get a mobile site.
(I haven't found an explanation like this anywhere else, so I think it can be helpful to others having this same problem)

Changing Android's WebView display from Desktop Mode back to Mobile Mode

I'm developing a browser which is supposed to allow toggling between mobile and desktop modes.
When changing to desktop mode via the following code:
mWebView.getSettings().setUserAgentString("\"Mozilla/5.0 (X11; Linux i686) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.63 Safari/537.31");
mWebView.getSettings().setBuiltInZoomControls(true);
mWebView.reload();
It's all good. However, when trying to change back to mobile mode via the following code:
mWebView.getSettings().setUserAgentString("Mozilla/5.0 (Linux; Android 4.1.1; HTC One X Build/JRO03C) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.58 Mobile Safari/537.31");
mWebView.getSettings().setBuiltInZoomControls(false);
mWebView.reload();
The page is reloaded, but it's still displayed in desktop mode.
It's worth noting that when testing this on YouTube, after triggering the 2nd code segment I AM able to return to mobile mode if I manually insert "https://m.youtube.com" into the address bar (something which is not possible when in desktop mode and before triggering the 2nd code segment). So it seems that resetting the UserAgent, while not providing the desired result, is not worthless after all.
So, assuming that changing the domain prefix from "www" to "m" programmatically is a somewhat hacky solution, how can mobile mode be automatically restored?
Edit:
As for clearing WebView's cookies - it solves the problem, but it seems that while it is trivial to clear ALL cookies, that is not the case when trying to clear only those cookies which belong to a specific domain. Clearing everything is not an option in my case.

What do I need to know to make my website work on mobile devices nowadays?

This question is based on What do I need to know to make my website work on mobile browsers? which was posted in 2009 with some old websites and specific Microsoft stuff
I make web-apps mostly in Django and it doesn't seem to work very well in Android/Iphone/other mobile devices.
There are some apps like django-mobile (https://github.com/gregmuellegger/django-mobile) that offers you the possiblity of making different sites depending on the flavor of the device. The problem is that we almost have to make 3 websites if we want to use it in Android, Iphone and PCs.
There are some W3C recommendations (http://www.w3.org/TR/2006/CR-mobile-bp-20060627/) from 2006, with I think is obsolete because 6 years made the internet and the devices completelly different.
Any contributions concerning that?

As far as I know (correct me if im wrong) Django is a Python framework, so it runs server-side. That should not effect anything running on the phone. All smart phones will be able to run HTML/CSS and JavaScript/jQuery.
If you are talking about how the page is displayed on such a small screen there are several options:
Have a responsive design that adapts to the device's screen size. Have a look at Bootstrap.
Have a separate mobile site and something that will detect a mobile/tablet device and forward it to the mobile site running on a subdomain like mobile.mysite.com.
Have a non-responsive site and use the viewport meta tag.
Another option is to use css media queries, which allow you to set conditional css depending on the screen or browser dimensions like this :
#media only screen
and (min-width : 325px)
and (max-width : 500px) {
/*CONDITION CSS*/
}
The nice thing about media queries is that you can get really detailed in theory you could have a media queries for 100's of devices specifying specific css for both the devices landscape and portrait mode.
Here's quite an interesting article about the Romney versus Obamas campaign and how each party has chosen to develop their mobile sites differently.