Strange behavior viewport width

1

Hi everybody!
I’m trying to fix out a problem about the viewport width of a web site that I’m developping with Hype.
The first step is to build up a fixed site that could be seen on PC and mobile devices in the same way…the next step is to create a specific layout for mobile devices.
What happens right now is this: I’ve placed the index file and the HTML5 folder in the root of my website and when I try to open the site from a mobile device (in this case an iPhone 6) I can see this:

1.jpg750×1334 30.1 KB
2.jpg750×1334 109 KB

while, if i put the index file and the HTML5 folder in a subfolder of my website, I can see something like this…that is exactly would like to achieve:

3.jpg750×1334 30 KB

4.jpg750×1334 72.1 KB

here are the parameters I set into Hype:

Document width
no Initial scale 1.0
yes allow user scaling

I tried also to set the Device width for the viewport (that should have more sense in this scenario), but nothing changed…

What I’m doing wrong?

Thanks

2

It looks like your site is loaded in a frame, so your viewport setting is set as width=device-width

Can you load just the exported .html file here?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
<html>
<head>
<title>annalisa matucci</title>
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="description" content="annalisa matucci pittrice | annalisa matucci paintress">
<meta name="keywords" content="annalisa matucci pittrice paintress quadri canvas arte art pittura">
<link rel="shortcut icon" type="image/x-icon" href="http://annalisamatucci.altervista.org/favicon.ico">
<script>
viewport = document.querySelector("meta[name=viewport]");
viewport.setAttribute('content', 'width=device-width, user-scalable=yes');
</script>
</head>
	<frameset rows="100%,*" cols="100%" frameborder="no" framespacing="0" border="0">
	<frame name="XYZZY2" scrolling="auto" src="http://annalisamatucci.altervista.org" noresize>
	<frame name="XYZZY" scrolling="no" noresize>
	<noframes>
		<h1><a href="http://annalisamatucci.altervista.org">http://annalisamatucci.altervista.org</a></h1>
		<p><a href="http://annalisamatucci.altervista.org">Clicca qui</a> per vedere la versione senza frames.</p>
	</noframes>
	</frameset>
</html>
3

here you are Daniel:

index.html.zip (7.4 KB)

thanks

4

I understood that this frame is caused by the web-provider because of the use of cloak!!
I manually edited the width of the viewport on that frame and set it to 1024, now I can see correctly the web site from the mobile devices!

can I also ask you if there is some incompatibility between chrome and random image Java script?!
I use a script like this:

<script language="JavaScript">
<!--

/*
Random Image Script- By JavaScript Kit (http://www.javascriptkit.com) 
Over 400+ free JavaScripts here!
Keep this notice intact please
*/

function random_imglink(){
var myimages=new Array()
//specify random images below. You can have as many as you wish
myimages[1]="image1.gif"
myimages[2]="image2.gif"
myimages[3]="image3.gif"
myimages[4]="image4.gif"
myimages[5]="image5.gif"
myimages[6]="image6.gif"

var ry=Math.floor(Math.random()*myimages.length)
if (ry==0)
ry=1
document.write('<img src="'+myimages[ry]+'" border=0>')
}
random_imglink()
//-->
</script>

<p align="center">This free script provided by<br />
<a href="http://javascriptkit.com">JavaScript
Kit</a></p>

but the images are not loading on chrome…I can solve the problem creating a random image display (in the same scene) directly with Hype?!

5

The script works for me in Chrome, at least as a standalone .html file or when using an HTML Widget in Hype. How are you including it?

My suggestion would be to look at the developer console and see if there are any specific errors.