Welcome!

Join our community of MMO enthusiasts and game developers! By registering, you'll gain access to discussions on the latest developments in MMO server files and collaborate with like-minded individuals. Join us today and unlock the potential of MMO server development!

Join Today!

Using iFrame to test your mobile in different screens

Good Guy George
Loyal Member
Joined
Apr 12, 2009
Messages
1,260
Reaction score
239
yeah, took me 15 min to done it.. the point of it to test your web in different W and H.

index:
Code:
<html>
<head>
	<title>Test Your Web!</title>
    <script src="JS.js"> </script>
    <style>
		body
		{
			background-color:#366;
		}
	</style>
</head>
<body>
    <input type="color" name="iFrame_Color" style="position:absolute; top:0px; left:0px; width:155px; height:50px; background-color:inherit">
	
    <input placeholder="EX: asp.net" type="text" name="iFrame_Src" style="position:absolute; top:50px; left:0px; background-color:inherit">
    <input placeholder="Screen Width" type="text" name="iFrame_W" style="position:absolute; top:80px; left:0px; background-color:inherit">
    <input placeholder="Screen Height" type="text" name="iFrame_H" style="position:absolute; top:110px; left:0px; background-color:inherit">
	
    <input type="button" value="Post Frame" onClick="JS_PrepareFrame()" style="position:absolute; top:140px; left:0px; width:155px; background-color:transparent;">
    <input type="button" value="Restore Frame" onClick="JS_Restore()" style="position:absolute; top:170px; left:0px; width:155px; background-color:transparent;">
</body>
</html>

JS:
Code:
function JS_Restore()
{
	location.reload();
	document.getElementById("iframe").reset();
}
function JS_PrepareFrame()
{
	var Src = document.getElementsByName('iFrame_Src')[0].value;
	var Width = document.getElementsByName('iFrame_W')[0].value;
	var Height = document.getElementsByName('iFrame_H')[0].value;
	var Color = document.getElementsByName('iFrame_Color')[0].value;
	
	iFrame = document.createElement("iframe");
	iFrame.setAttribute("src", "http://"+Src);
	iFrame.style.position = "absolute";
	iFrame.style.top = 0+"px";
	iFrame.style.left = 300+"px";
	iFrame.style.width = Width+"px"; 
	iFrame.style.height = Height+"px"; 
	iFrame.style.backgroundColor = Color;
	document.body.appendChild(iFrame);
}
 

Attachments

You must be registered for see attachments list
• ♠️​ ♦️ ♣️ ​♥️ •
Joined
Mar 25, 2012
Messages
909
Reaction score
464
There are addons for that. At least you code, however.
qet123 - Using iFrame to test your mobile in different screens - RaGEZONE Forums
 
Good Guy George
Loyal Member
Joined
Apr 12, 2009
Messages
1,260
Reaction score
239
Ye, whatever. Another useless thing, these companies destroying the coders.
 
• ♠️​ ♦️ ♣️ ​♥️ •
Joined
Mar 25, 2012
Messages
909
Reaction score
464
Well in past I coded a lot of things other people made better, too. Just for the personal effort, experience and use. The only difference was, I did not release it, because nobody would need it (except for me, because I like my own stuff). :zippy:
 
Good Guy George
Loyal Member
Joined
Apr 12, 2009
Messages
1,260
Reaction score
239
Well in past I coded a lot of things other people made better, too. Just for the personal effort, experience and use. The only difference was, I did not release it, because nobody would need it (except for me, because I like my own stuff). :zippy:

I'm like you, and it makes me sad. That's why i'm looking for ideas never been done.
 
Joined
Sep 1, 2011
Messages
453
Reaction score
191
I didn't know about that extension, very usefull.

For other people who would like to try it out, here is the link:

Why would you use a addon when chrome supports this directly from the developer console.
 
• ♠️​ ♦️ ♣️ ​♥️ •
Joined
Mar 25, 2012
Messages
909
Reaction score
464
Why would you use a addon when chrome supports this directly from the developer console.

Because ...
  • It's two clicks away after pressing F12 and when I keep it open on an extra window I still have to type the numbers manually instead of using resolution bookmarks
  • It's zooming the content instead of sizing the window, I want to see real quality
But all in all you're right, those devtools are very useful I never doubt, above extension is just a quick solution.
 
Back
Top