Start a new topic

HTMLDrawable Viewport Not Matching

I have built a HTML page that I want to use with Wikitude 8.2 javascript's HTMLDrawable. I have tried setting up the viewport meta tag as instructed, matching the width and height to my htmldrawable.js...


var mapHTML = new AR.HtmlDrawable({
uri: "assets/lol_map.html"
}, 1, {
scale: 2,
viewportHeight: 360,
viewportWidth: 480,


<meta name="viewport" content="target-densitydpi=device-dpi, width=480, height=360, user-scalable=0, initial-scale=1">

Unfortunately, this didn't scale correctly. My CSS for scaling looks like...

#map {
height: 80%;

html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;

* {
box-sizing: border-box;

body {
font-family: Arial, Helvetica, sans-serif;

/* Float four columns side by side */
.column {
float: left;
width: 25%;
padding: 0 10px;

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;

/* Responsive columns */
@media screen and (max-width: 600px) {
.column {
width: 100%;
display: block;
margin-bottom: 20px;

/* Style the counter cards */
.card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
padding: 16px;
text-align: center;
background-color: #f1f1f1;


This CSS configures a Google Maps object and a column card object. Why is the scaling not working?

1 Comment

Hi Jamie,

First of all, sorry for the late response.

I was checking the scale parameter and seems to be working fine in our HTMLDrawable example. Not sure where the problem could come from, but it could happen that the content inside the viewport has some absolute values which makes the content not to scale, just the viewport container.

Thank you,


Login or Signup to post a comment