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}
Related
In my expo / react app I have some HTML from a website that I'm pulling from an api. I'd like to use links within that html to link to pages within the app. Some example html...
responseHtml = "<p>this is a paragraph Some Page<p>"
then I was thinking I would do some string replace so that the html ends up looking like this...
responseHtml = "<p>this is a paragraph Some Page<p>"
Then I would render the content in my app and the links would work if I did something like this...
<HTML onLinkPress={(event, href)=>{Linking.openURL(href)}} html="{responseHtml}" />
I cannot seem to find the right href value to make a successful click to a page within the app. I've tried using the full path, exp://127.0.0.1:19200/Article/some-page, I've tried relative links like /Article/some-page, and I've tried setting a schema value to "myapp" in the app.json and linking to it with myapp://Article/some-page
Have you tried to parse it ? I would use the react-native-htmlview library. There you can customize the Link handler. So you could open the link or pass it down as prop.
Your code could be look like this:
import React from 'react';
import HTMLView from 'react-native-htmlview';
class App extends React.Component {
render() {
const responseHTML = ``;
return (
<HTMLView
value={htmlContent}
stylesheet={{
fontWeight: '300',
color: '#FF3366', // make links coloured pink
}}
/>
);
}
}
If you want to do any custom actions with your link it could look like this:
return (
<HTMLView
value={this.props.putyourhtmlhere}
onLinkPress={(url) => console.log('clicked link: ', url)}
/>
);
Hope that helps
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 readly know/read a lot of questions/answer about this suject but my problem is on the navigator of tablet Galaxy 2
here is my work on http://jsfiddle.net
I tried all solutions but it doesn't work on navigator Galaxy 2: the file isn't automatically downloaded.
When i click on this link or type url on adresse bar => it works
thanks a lot
best regards
javascript
$(document).ready(function(){
//$('#fileHrefId')[0].click();
//window.location.href=$('#fileHrefId').attr('href');
document.location.href=$('#fileHrefId').attr('href');
//$('#fileHrefId').click();
//$('#fileHrefId').trigger('click')
})
html
<a id=fileHrefId href="http://xyz?file=myfile.txt">myfile.txt</a>
You probably want touchend:
$('#yourSelector').trigger('touchend');
Also, you may want to check out hammer.js for additional functionality
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'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", "");
}
}
}