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
Related
So I've been trying to learn more about responsive design. I've started playing about on my computer with a tiny project with a mobile first approach. I scaled my browser down small and styled the layout correctly. Using % for widths and REM for fonts. I thought wow this is easy
However, when I went to look at my work on an actual mobile the layout positions were fine but every feature/element on the page was showing up tiny. So the navigation menu was coming up really small compared to how it looked in my browser.
Why is this? The browser I use is chrome and the mobile android.
I have created a fairly simple responsive website and have optimized it for mobile use using the meta tags. It works very well on desktops and on iOS phones and even the Galaxy S5. However, based on some tests using a browser compatibility program, the design falls apart on Android devices using 4.2 or lower (including the Samsung Galaxy S2 through 4, Kindle Fire 2, and Google Nexus). The images (doesn't seem to matter what type of file) will either become very vertically stretched or disappear altogether, no matter the file type. I have tried many things and can find no apparent difference between the images that are displaying and those that are not. Also, my header and footer are no longer where they are supposed to be. From what I can tell, the problem is that Android is not interpreting my css in the same way as ios does.
I have been able to fix the problem somewhat by dictating pixel dimensions for all of the photos instead of percentages, although this messes with the responsiveness of the site. This also fixes my header/footer problem although there is a very large space on the top and bottom of the mobile drop down menu and my logo in the footer (.svg) is distorted despite giving it dimensions.
I can't seem to find any information about this problem so I feel like it has to be an easy fix that I am overlooking.
The website is www.2015housingconf.com.
Thanks in advance!
Our corporate website is going through some weird shenanigans. It looks fine on any browser when you view it on a desktop pc or laptop. However, when you surf to the website on a mobile device you get these borders around the page elements both in Safari on iOS and Chrome and Android 2.2 Stock Browser in Android.
While looking into the problem I've noticed that the borders also appear on Chrome on a desktop/laptop, but only at certain zoom levels:
100% zoom:
110% zoom:
Weird thing is, the lines aren't consistent throughout the different zoom levels:
This is taken at 90% zoom.
So to clarify: I can reproduce the problem I'm seeing on the mobile devices by zooming around in Google Chrome on a laptop/desktop. But when I load the website on a mobile device, I always see the lines, no matter what the zoom level is.
The entire website is given its lay-out through tables (Yes, I know... It was build ages ago as a template in Typo3 and though we can make small changes to it, rebuilding the entire template is not an option. But this aside.) so I thought it might have something to do with the CSS rules on the tables, but there doesn't seem to be anything wrong with that. And if it were a CSS problem, wouldn't the lines be consistent on the various zoom levels? This is the CSS file for the template: Pastebin
Either way, we're a bit stuck on this not knowing what's causing the issue. If anyone has ever encountered something like this, any enlightment on the issue would be appreciated. Thanks.
Edit:
Just tested this on IE, Firefox and Safari on a desktop. No borders there, no matter what the zoom level is.
Edit2:
Zooming to 500% (Chrome on a desktop) shows that some of the lines are blue, some are white and some are gray, according to the colour scheme of the website. They are also not equal in length and seem to change position when I scroll around the webpage (i.e: move a bit more to the left/right.)
This sounds similar to space/gaps between divs on website when viewed on iPhone/iPad ("On an iPad, when a website is viewed at a scale under 100%, some artefacts appear sometimes. One is particularly visible: a 1 pixel lines between divs, just like on your site, under the menu")
The solution to that answer suggests you either:
Disable zooming (if you have designed for viewing at that particular size)
Have a 1px overlap on elements (e.g. margin: -1px)
The overlap fix has worked for me in the past, though this might be harder with a table-based layout.
How can I make a website(which is exist before) compatible with android?
So that we can use every functionality of that website on our android device.
Have a look at this link: http://developer.android.com/guide/webapps/targeting.html. The same rules would apply for making a website. One of the most important things is adding this line:
<meta name="viewport" content="width=device-width" />
This tells the browser to set the zoom level according to the device width. Otherwise the site will be zoomed out a lot and the user will have to zoom in to see the text properly.
Almost all of your website's functionality will work in the Android browser unless you have some really screwed up Javascript code.
Have a different stylesheet for the mobile browser.
Keep lower resolution graphics as bandwidth is a huge issue on phones. An EDGE network is too slow and even 3G speeds vary a lot.
Do not keep the pages too long. Display sections as Accordion menus which will expand/contract when the user clicks on the headers.
Do not keep drop down menus which are activated on mouse hover. There is no hover state on the phone.
This article from SmashingMagazine has a couple of other tips.
have a look at WebView here. I did this with an Internal site of mine. Basically I scaled it down in size and graphics. Depending on the amount of content it could be easy or more difficult.
rewrite/modify it to be compatible with mobile browsers. Its not something that you can just add a stylesheet for.
Android's webbrowser, at least for recent versions of Android, is quite powerful, and quite close, in terms of features, to a desktop one.
So, if your website doesn't do any too-fancy / special stuff (like super-recent HTML5), it should work quite well on an Android device.
Note, though, that if you want your website to work on a mobile device, you'll have to at least think about :
The fact that 3G (or worse) network is slow (bandwith is not great ; and ping is not good either) ; don't make your pages too heavy.
The screen is small : don't put too much data on it
Using touch-screens with big (compared to the screen's size) is hard and not precise : use big links, don't have links too close to each other.
Here are two images of the same android phone, once in Portrait mode, once in Landscape mode.
Shouldn't one resolution be the opposite of the other? I.e. if one is 800x1360, the other should be 1360x800? What's going on here? If I try the same thing on my ipod touch, it reports the same resolution regardless of orientation. Also, on the android phone, the resolution appears to change as you zoom in and out or scroll around the page.
I'm trying to figure out how to handle the "reported" resolution of an android phone in CSS, which I can't do until I know exactly which resolution it reports. :(
As far as I can determine, the browser assumes that you are going to let it rescale the page as necessary, so it just always reports the same width no matter the actual screen size and orientation. The height is presumably just chosen so that the aspect ratio matches the actual screen ratio.
If you are running FroYo, the width is pretty much always reported as 800. I believe that it was more like 640 for Eclair, and that earlier versions may have used a completely different scheme for reporting screen size. (Those earlier versions also, I believe, supported "#media handheld", unlike later versions which assume that your phone screen/browser is closer to a desktop than a traditional handheld device.)
I've noticed a weird thing where dimensions like this are stored from the previous window/session. When u go to landscape/portrait and get the rez, do a refresh, see if u get another different rez.
Same is true for scaling.
My advice is do a useragent lookup and make a page specifically for mobile devices.
rendering the normal 'desktop' site just wont work.
if you do make the mobile site look at the html meta tage "Viewport" and put something like this in your head