I am trying to adapt and port an old project to PhoneGap.
So far, the project works properly under Android browsers but it doesn't with PhoneGap since it doesn't adapt the content to fit the whole screen. It always leave a blank space and that's not what I would want. PhoneGap doesn't seem to pay attention to my viewport property in the metatag I am using.
I have been doing some tests to find out the problem without any kind of result.
For example, the following test just contains two files: index.html and config.xml
It contains a DIV that is 276 pixels width and I would want PhoneGap to make it fit the whole page as the Android browsers do.
By the way, I am using PhoneGap Build web site to build this test online.
Here is the content of the index.html file (I am not using DOCTYPE to make it simpler but even using it won't work properly):
<html>
<head>
<meta name="viewport" content="width=276, user-scalable=yes" />
<title>Title</title>
</head>
<body>
<div style="width:276px; background-color:orange;">I want to make this div fit to the page</div>
</body>
</html>
And this is the content of the config.xml file (note the preference EnableViewportScale set to "true", but even being set to "yes" won't work):
<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id = "com.phonegap.example"
versionCode="10"
version = "1.0.0">
<!-- versionCode is optional and Android only -->
<name>PhoneGap Example</name>
<description>
An example for phonegap build docs.
</description>
<author href="https://build.phonegap.com" email="support#phonegap.com">
Hardeep Shoker
</author>
<preference name="EnableViewportScale" value="true" />
</widget>
So that is. Is there anything that I am doing wrong? How can I archieve what I am trying to do? I am sure it should have a pretty simple solution but I can't find it right now.
Thank you very much in advance and sorry about my English, it's not my native language.
Cheers,
Joan
Try
<meta name="viewport" content="width=276, user-scalable=1" />
or
If you add the following lines to your onCreate() method:
WebSettings settings = this.appView.getSettings();
settings.setSupportZoom(true);
settings.setBuiltInZoomControls(true);
or
try using iScroll 4 (http://cubiq.org/iscroll-4)
Pinch / Zoom
I almost gave up, when I stumbled upon this post:
http://antonylees.blogspot.com/2012/06/phonegap-viewport-size-is-too-small-on.html
Basicly I modified my default AndroidManifest.xml entry from:
<uses-sdk android:minSdkVersion="10" android:targetSdkVersion="19" />
to
<uses-sdk android:minSdkVersion="7" />
You may play with the version a lil bit. Just don't target version 19 I guess. Plus you may add
target-densitydpi=device-dpi
target-densitydpi=medium-dpi
...
To your meta viewport tag, depending on what you're trying to do.
EDIT:
Ok, here's an exploanation: http://developer.android.com/guide/webapps/migrating.html
Since Android 4.4 (KitKat), WebView has changed with new one based on chromium. By having target version below 19, webview is set in quirks mode.
Note: If your targetSdkVersion is set to "18" or lower, WebView
operates in "quirks mode" in order to avoid some of the behavior
changes described below, as closely as possible—while still providing
your app the performance and web standards upgrades. Beware, though,
that single and narrow column layouts and default zoom levels are not
supported at all on Android 4.4, and there may be other behavioral
differences that have not been identified, so be sure to test your app
on Android 4.4 or higher even if you keep your targetSdkVersion set to
"18" or lower.
PP: Using LG L70 phone.
Related
Unfortunately I had the problem with my HTML5 website, where my Internet Explorer browser (I'm on version 11) decided it was the right thing to do to load the website in IE7 compatibility mode.
Insert annoyed face
Adding this <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to the website does make it work correctly in IE, however if you put the website through the W3C Validator, it throws this error at you:
Line 6, Column 59: Bad value X-UA-Compatible for attribute http-equiv
on element meta.
I want to know if anyone knows if there's a way of having the best of both worlds?
It may be a little late for a contribution, but maybe someone can use it. Based on the fact that <meta http-equiv="..." content="..."> is used to simulate an HTTP response header (see here), if you have access to a scripting language like PHP, you could try something like this:
<?php
header('X-UA-Compatible: IE=edge');
?><!DOCTYPE html>
<html lang="en">
...
That way, the server still sends the header, but it's not in the HTML5 code itself. I used this on my website and it validates correctly on the W3C validator. I'm not sure about it having the expected results with IE rendering. Maybe someone can give feedback. My experiments are not too conclusive. I did find some small differences between using the PHP header function and using the meta tag when I tested a page in http://netrenderer.com/.
As I was on a local website, I had to un-tick the Display intranet sites in Compatibility View:
Alt+T > Compatibility view settings
The other option I found which has helped for my published project was to add some code in web config file:
<system.webServer>
<httpProtocol>
<customHeaders>
<add name="X-UA-Compatible" value="IE=Edge" />
</customHeaders>
</httpProtocol>
</system.webServer>
This is obviously IIS on Windows, but you can apparently achieve this on Apache.
I've read a bunch of blog posts, like this one, and also some other questions here on SO, like this one.
These all say that if you want to popup a message advising the visitor that the Desktop mode of IE 10 is required to view the site, then 'all you have to do' is add this meta tag:
<meta http-equiv="X-UA-Compatible" content="requiresActiveX=true" />
Or you can set an HTTP header instead:
<add name="X-UA-Compatible" value="requiresActiveX=true" />
I've tried both of these techniques and neither of them seem to work! The Modern UI version of IE just does nothing at all. No popup, no message, nothing.
I'm running my site locally at the moment through IIS 8. I've added the URL to my trusted sites list. If I use another browser, like Chrome, I can see that the response header is definitely being set. The page runs in IE10 Modern, it just doesn't tell me to switch to Desktop mode...
I've tried strategically positioning the <meta tag in different places in the <head etc but this has not helped either
Can anyone offer any advice? Even mentioning a site that implements it would help...
Edit
I've tried adding this to a 'live' web page on my own site and still I am not prompted to switch to desktop when using IE10 Modern...
Not sure this will address it for you but it did for me. I had to combine multiple Compat tags into a single entry. Lke this:
<meta http-equiv="X-UA-Compatible" content="IE=7, requiresActiveX=true"/>
We have been developing ASP.NET MVC 3.0(Razor & HTML 5) application with IIS 7.5. The site should run on IE8.
The site content displays properly when the comaptibility mode is OFF. But, if it runs with compatibility mode on then the few elements goes outside horizontally.
As the company's IE policy, all the intranet application runs under the "Compatibility Mode" hence I can't change that part.
What should be possible solution?
1. Is there any way when the application url gets renedered, I explicitly instruct browser to not run under compatibility mode (programmatically)?
2. Is there any ways in IIS 7.5 to enforce rendering targeting IE 8.0+?
3. Do I need to target to HTML 4.0 and convert all the fuzzy css/html targeting older html version?
I am seriously out of idea. It may possible the above direction points are also logic-less.
Please suggest somthing on this.
You'll need to set the X-UA-Compatible header. You can do in at least two ways:
Add the following to every page:
<meta http-equiv="X-UA-Compatible" content="IE=8" />
Or you can tell IIS to send it with every response following these instructions to set custom headers to every response.
For a list of values you can use X-UA-Compatible look at this page.
Add this <meta> tag inside <head>:
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
This should force IE to use the most up-to-date rendering engine available.
HTML5Boiler plate suggests we put this one in our HTML page if we favour Chrome over IE
(which is my case)
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
We all understand how it works.
If the user is using IE but it has also installed the Chrome Frame the chrome frame will be used to run the page (which is probably much faster when it comes to execute my js)
The question: is there any 'bad' side effect ?
any particular reason why I should not add that snippet ?
Thanks
The only downside I know about this snippet is that validators don't accpet yet the content value of this meta (even if they should), so if it seems annoying to you, just remember you can also specify it inside an .htaccess (as suggested also on html5 boilerplate site)
See https://gist.github.com/1292092 for an example of htaccess inclusion
See also this thread about meta validation
This does not have any downsides.
This will force the browser to render as properly as it can, ignoring those awful IE Compatibility modes.
This will not break the browser, just peacfully explain to it, that this page doesn't wish to be experimented with, and just to be shown properly.
There are in fact downsides to this meta tag (along with conditional comments) which is why we recommend you reference it from the server. See this issue for details.
I am building a web app, which is intended to run on the Android browser.
When I have a webpage that contains any kind of viewport meta tag, like this:
<meta name="viewport" content="width=400"/>
My webpage crashes on ajax calls. It happens when using the emulator, the actual browser on my nexus one, and on a droid (all running Android 2.1).
Without the meta tag, the ajax calls run as they should.
Any ideas?
You may try using the below meta tag.
I have successfully used both these meta tags and AJAX calls did work for me on the Nexus One.
<meta name="HandheldFriendly" content="true" />
Also, it's recommended these days that you set content="width=device-width" and style the page with CSS to look at least tolerable. Otherwise you get a ridiculously zoomed-in page on the iPad.
Of course, never mind if you already have a way of dealing with that.