I'm creating an App using PhoneGap for Android. One of the pages in the App contains an iFrame (with local content) that is larger than the rest of the pages (this is a single-page App).
The problem I've run into is that once the iFrame page is viewed, the window.innerHeight and window.innerWidth JavaScript objects change their values to match the iFrame's width/height which is causing the rest of the 'pages' to display incorrectly as they are not the same size.
This persists even after I remove the iFrame from the DOM.
Has anyone run into this or has an idea of a workaround?
I just was in the same situation and also I removed the iframe, the solution (that worked for me) is to put the next in your html head:
<meta name="viewport" content="width=device-width, initial-scale=1">
I always though that this part was unnecessary because the innerWidth and innerHeight don't complicate on the desktop, but it cost me 6 hours.
I would like to know if it worked for you, bye.
First, for sure there is a bug here !
I just had the same issue and resolved, here is how.
I changed all the iframes & images width to 100% or less for those wider than window.innerWidth.
Here is the corresponding HaxeJS code:
resizeNodeChildrenTag(_contentContainer,"iframe");
resizeNodeChildrenTag(_contentContainer,"img");
private function resizeNodeChildrenTag(node:HtmlDom, tagName:String):Void
{
var tagNodes:HtmlCollection<HtmlDom> = node.getElementsByTagName(tagName);
// for all nodes with the given tag name
for (i in 0...tagNodes.length)
{
if(tagNodes[i].clientWidth > Lib.window.innerWidth)
tagNodes[i].setAttribute("width", "96%");
tagNodes[i].setAttribute("height", "");
}
}
}
Related
Perhaps a typical and well-trodden question on first glance. But all other answers I've looked at (there are many) have consistently suggested (almost always) changing the user-agent of a WebView to a desktop string. Consistently, people have responded that this does not work for them. Myself included.
As a web design novice, from what digging I have done it seems that at some point in the last few years "responsive design" became the recommended and most widely used web design implementation philosophy of choice to determine how to deliver/display a site.
Which is why I believe changing a user-agent of a WebView is having no effect, as the site seems to be determining how to deliver content based on the meta tag "viewport", for example:
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
Has anyone else overcome this yet? Would my (layman) analysis of the issue be correct?
As far as my understanding, i think this seems like the below situation
Please look into this answer Showing the desktop version of a fully responsive website on tablets
So I think I may have found a solution, in part due to #hussnain-muavia answer, though there was slightly more I had to expand which I thought would warrant its own response.
WebView Settings
The WebView will need to be able to execute JavaScript:
WebSettings settings = _webView.getSettings();
settings.setJavaScriptEnabled(true);
In order for the site to be completely zoomed-out (i.e. displaying the full site and without scrollbars) additional settings will have to be applied to the WebView:
settings.setUseWideViewPort(true);
settings.setInitialScale(1);
settings.setLoadWithOverviewMode(true);
Achieving a Desktop Layout
Ultimately the thing that will result in a desktop view is the following JavaScript:
function desktopMode() {
var viewPort = document.getElementsByName("viewport");
if (viewPort != null) {
viewPort = viewPort[0];
}
else if ((viewPort = document.getElementById("viewport")) == null) {
return;
}
viewPort.setAttribute("content", "width=" + (screen.width + 1) + "; initial-scale=0.5");
}
As I mention in my question, I am a web design novice. Though one thing I notice is inconsistency (sorry web devs?) so I've intentionally built in a check by name and ID. We should expect only one tag, hence why name assumes the zeroth element.
Further to this solution I found I was getting a desktop layout but not quite the complete thing. So I modified the calculation thusly:
getViewport.setAttribute("content", "width=" + (screen.width * 4) + "; initial-scale=0.5");
I don't like it. But it works. My suspicion is there probably is some better calculation or constant for this.
It's probably worth mentioning, it's still worthwhile changing the user-agent string, in case the site does not use a responsive design. But this is an unrelated topic.
A major drawback of this solution is that it will result in some hideous UI, where the user can see the site being resized. As I put the JS in onPageStarted, but of course the functionality gets overridden. So I put it after the super onPageStarted call or in onPageFinished and this results in the same result of the user seeing the resize happening. Any ideas out there?
I am using "WebView" in react-native for rendering a web page. The web page doesn't have mobile-friendly UI.
When I open it in Chrome Browser, it looks like below. AND I WANT TO RENDER IT LIKE BELOW
But When I render below code, it looks like the image shown below.
Please see that I have tried different props automaticallyAdjustContentInsets = {false} , scalesPageToFit={false}. But it's not giving me the desire output.
render(){
const URL = "https://stellarterm.com";
return(
<WebView
source={{URL}}
/>
Result
Please feel free to suggest any solution if you have. Any third party library will also be okay.
Your site has page width set in meta already <meta name="viewport" content="width=1080">
So you will need to override that with injectedJavaScript
injectedJavaScript={`const meta = document.createElement('meta'); meta.setAttribute('content', 'width=device-width, initial-scale=0.5, maximum-scale=0.5, user-scalable=0'); meta.setAttribute('name', 'viewport'); document.getElementsByTagName('head')[0].appendChild(meta); `}
scalesPageToFit={false}
The user-scalable property on the selected answer's injection must be set to 1 to enable manual screen scaling.
I have used this line to Zoom and fit WebView content on every mobile screen
scalesPageToFit={false}
I'm getting puzzled by this..
I have this piece of code:
<a href=" #/products/{{product.id}}" ng-click="customFunction()">
Where product is an object with an 'id' element.
Where customFunction adds the product in a shopping cart
Both are combined because the route in the href element permits to access a new page where the added product is customizable.
The code and the routing is working fine cross browser except on mobile phone (android at least, both chrome and native browser). On android phone only the ng-click reacts on click. But i am still able to open the web page routed by href by pressing the link and opening in a new tab :oO
my routing looks like that (app.js):
when('/products/:productId', {
templateUrl: 'partials/store_composition.html',
controller: 'mainCtrl'
})
and in the main Ctrl is called the getProduct function:
if ($routeParams.productId != null) {
$scope.product = $scope.store.getProduct($routeParams.productId);
}
which access the store.js file here :
store.prototype.getProduct = function (id) {
for (var i = 0; i < this.products.length; i++) {
if (this.products[i].id== id)
return this.products[i];
}
return null;
}
And it works fine... Except on android!! but again the link exists if long pressed for new tab :s :s
Any idea?
Update:
I am noticing that the URL in the navbar of android/chrome never changes. Contrarly of whats happening in regular browsers (an URL such as app/index.html#/products/batavia400 is updated on top)
But except for the route i have linked in my post every other routing in my app are working (with no url update just the same... :/)
SOLVED:
I actually solved the problem by adding the
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
and its the user-scalable=nothat made the trick.
The screen was slightly, really slightly zoomed by default by android, and this was creating the conflict on user's touch on the div's link.
I guess if my web designing skills were better I wouldn't have had the problem ;)
I actually solved the problem by adding the
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
and its the user-scalable=nothat made the trick.
The screen was slightly, really slightly zoomed by default by android, and this was creating the conflict on user's touching the div's link.
I'm developing a PhoneGap + JSmobile + html5 app for iOS and Android. I'd like to force the landscape orientation for same pages. I'm trying to find a solution but I can't do it.
Is it possible at all?
I found a post where someone says to use a trick in CSS to rotate the #div:
#ID {
-webkit-transform:rotate(90deg); /* Safari and Chrome */
}
this trick rotates the page but it is rendered with with a border on the left and right side.
i found a solution:
$(document).on('pagebeforeshow', '#ID',function() {
setTimeout(function() {
$('head').append( '<meta name="viewport" content="width=device-height, height=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;">' );
}, 200);
});
the timeout is to prevent strange change in the prev page ;)
I have recently come across something quite wierd, I'm not sure if it's maybe me just missing something but I can't understand why this is happening.
I have a site that has the following jQuery snippet running on it:
$(window).resize(function(){
alert("Resize fired!");
});
When I go to the site on an Android phone browser, and simply scroll up and down the site, I can see the alert.
The Android browsers scroll bars (which fade in and out) are overlayed ontop of the entire site and don't seem to cause any resizing of the window, so I'm guessing this event isn't being fired by them.
Does anyone know why the Android browser is firing this event on scrolling?
Any information will be greatly appreciated.
EDIT:
I have tried setting CSS for body, setting overflow-y to scroll to see if that was a viable solution but the event is still being fired on scrolling on Android.
EDIT #2:
I am using the following metatag in my HTML:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
I was having the same problem, my solution was to check if the window size actually changed, for doing it I needed to store the past window width somewhere in my app. The code could be something like this:
$(window).resize(function() {
clearTimeout(app.resize.timer)
app.resize.timer = setTimeout(function(){
var window_changed = $(window).width() != app.size.window_width
if(window_changed) console.log('Window size changed! resize site')
}, 500)
})
I did not count on the window height because my Android browser hides and shows the address textbox when I scroll down the site making the window height change on vertical scroll
#john-mccollum is correct in the comments. It appears to be the disappearing browser interface causing a change in height that triggers the resize event. So check for change in width specifically in your function if you are doing responsive design stuff where you want to check if the width has been resized.
$(window).resize(function(){
var w = $(window).width();
if (typeof checkw == 'undefined') checkw = w;
if (w!=checkw) {
console.log("The width changed from "+checkw+" to "+w);
// do your responsive magic!
checkw = w;
}
});
Not required to make this work, but this pairs well with the Paul Irish / John Hann "smartresize" method.
i'm having the same problem too!
the problem is true because the height of the browser in Android will change when the url bar hide and show. So, we have to make the browser reload only happens when the width size changes.
i saw this question in Stackoverflow show me how to do this. And this is the jsfiddle.
var doit;
function resizedw(appwidth){
var window_changed = $(window).width() != appwidth;
if ($(window).width() != appwidth){
("body").append("did it"+appwidth+" ");
}
past_width = $(window).width();
}
var past_width = $(window).width();
window.onresize = function() {
clearTimeout(doit);
doit = setTimeout(function() {
resizedw(past_width);
}, 100);
};