I'm building a responsive HTML creative template to serve a full screen ad. The ad is displayed on a mobile device, running iOS 6-7, using version 6.8.0 of the DFP SDK. I noticed that when serving an ad with my template, DFP wraps my HTML with extra html/body tags (see comments below):
<!-- the code below is from DFP -->
<html><head>
<meta name="viewport"content="width=device-width,height=device-height,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0"/>
</head><body leftMargin="0" topMargin="0" marginwidth="0" marginheight="0">
<!-- my code starts here -->
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
</head>
<body>
...
<!-- my code ends here -->
<!-- the code below is from DFP -->
</body></html>
The issue I'm having is that height=device-height from the injected HTML code makes my ad scrollable. My ads are displayed in landscape and for unknown reason device-height and device-width default to a same value - the device width. The HTML above is not valid because nested html/body tags and I can't control the viewport definition to remove the erronous height=device-height.
Questions:
Is there a way to suppress DFP generated wrapping HTML (<html>...</html>) and rely on my code to supply it (so I can supply my own viewport)
Any clues why landscape view of the ad defaults both width and height to the device width
I ended up using Javascript to update the header:
<script type="application/javascript">
var meta = document.getElementsByTagName("meta")[0];
meta.setAttribute("content", 'width=device-width,user-scalable=0,minimum-scale=1.0,maximum-scale=1.0');
</script>
Related
when I load my Wix website using webview_flutter it doesn't take fullscreen, but it works using flutter_webview_plugin, and I figured that the problem is that webview_flutter doesn't set wide viewport natively webView.getSettings().setUseWideViewPort(true);
so how can i make it use this wide viewport?
If you control the html yourself that is loaded (or it's just some embed code), try adding the viewport meta tag in the head; for example:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
</head>
<body>
<script async="" src="https://url-to-the-embed-code-you-are-using"></script>
</body>
</html>
so after 24 hours of debugging i was able to acheive the desired effect by forking the package and modifying the native code myself.
the modification was on the file WebViewBuilder.java and simply adding the line webStettings.setUseWideViewPort(true); to activate the wideviewport
I am adapting a fixed size website (800x600 pixels) to work on mobile phones and I have run in to some problems on the iPhone.
I have set the meta viewport tag with width=800 to fit the page exactly on the screen.
Unfortunately on the iPhone it centers the page on the height giving it an unwanted top-margin. It works fine on Android.
How can I get it to align to the top on iPhone?
Here is a simplified version of the page
<html>
<header>
<meta name="viewport" content="width=800">
</header>
<body>
<div style="width:800px; height: 600px;">
</div>
</body>
</html>
Try this , and it should rescale automatically
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Hi Im developing a sencha-touch-2 app which will be embedded on iPhone UIWebview. The UIWebview size is 280x420 which is centered on the iPhone screen. Everything works perfect on sencha development but when I try to build the sencha into production, the size of the sencha page streched or not fit to the size of the UIWebview. Please see code below
SENCHA
Adding meta tag to the body of index.html
<body>
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
This code works on development but when change to production the page change. What should I do to make it on the production build, since production is very fast on loading.
Try this, just add this script in your html body tag.
<script type="text/javascript">
setTimeout(function(){
var meta = document.createElement('meta');
meta.setAttribute("name","viewport");
meta.setAttribute("content","width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(meta);
},1000);
</script>
Sencha touch 2.0 will overwrite your script with it's built in meta tag. So, what happen is your meta tag will be loaded but will be replaced by it's own meta tag.
I am having some difficulty with Adobe Device Central CS3. I am doing a mobile website test only using Html and CSS I am busy testing it via device central using all the Nokia Phones in the library.
I did a moch up in Ps using Nokia N80 which is 352px by 416px (my photoshop document)
On my Meta tags I put the following code:
<meta name="viewport" content="width=device-width" />
<!--The iPhone will auto fit the screen -->
<meta name="viewport" content="width=240, height=320, user-scalable=yes, initial-scale=0.7, maximum-scale=5.0, minimum-scale=1.0" />
<!-- adjusting Web pages to screens and adjusting Web page content size -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<script type="text/javascript">
if((navigator.userAgent.indexOf('iPhone') != -1) || (navigator.userAgent.indexOf('iPod') != -1))
document.location = "http://iphone.mywebsite.com/index.html";
When I am viewing with devices less than 352px by 416px the content gets chopped and you have to scroll sideways. From the blogs that I have read putting "viewport" is suppose to fix the problem and make the content/site scalable according to the device used.
I should also make a note that I have a wrapper div that holds everything and it has a fixed width and height.
#wrapper {
width:352px;
height:416px;
background:url(../images/Site-Bg_02.png) repeat;
}
Help!
You could set your viewport width to 352, but I STRONGLY recommend instead designing your page with flexibility in mind, i.e. don't use absolute pixel values. Instead use percentage widths, and try resizing your browser (if you don't have access to actual devices to test with) to ensure that your elements fit correctly in a variety of widths.
The viewport tag will only work on certain devices, and fixed-pixel sizing is generally a mobile web no-no.
I am using jQuery mobile in its simplest form.
Just added a page with a header content and footer
in the content I've added many test to get a scroller
The divs seem to be as wide as the word 'test', therfore the scroller only applys to a very small portion of the width of the screen.
When I try to scroll outside of the word 'test' the whole page is moving, without actually scrolling the content area.
I've added the following meta ta g to the head section:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no;" />
it didn't do anything.
Any ideas?
Try putting:
<div data-role="content" data-theme="c" style="width: 100%">