Using iFrame to test your mobile in different screens

**qet123** · 20-11-13

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);
}

**MentaL**

Using iFrame to test your mobile in different screens

**שเ๒єtгเ๒є** · 20-11-13

There are addons for that. At least you code, however.

**qet123** · 20-11-13

Ye, whatever. Another useless thing, these companies destroying the coders.

**שเ๒єtгเ๒є** · 20-11-13

Originally Posted by qet123

Ye, whatever. Another useless thing, these companies destroying the coders.

Useless? Company? I'm sorry this is very helpful and just one person who coded it.
I like you still code it for yourself, but it's not really comfort, however.

**qet123** · 20-11-13

Useless thing from me, not from the company

**Tronic** · 20-11-13

did you learn something from it? if u did then it wasnt useless :D

**שเ๒єtгเ๒є** · 20-11-13

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).

**qet123** · 20-11-13

Originally Posted by שเ๒єtгเ๒є

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).

I'm like you, and it makes me sad. That's why i'm looking for ideas never been done.

**Eronisch** · 22-11-13

Originally Posted by שเ๒єtгเ๒є

There are addons for that. At least you code, however.

I didn't know about that extension, very usefull.

For other people who would like to try it out, here is the link: https://chrome.google.com/webstore/d...ammmilcgefonfh

**שเ๒єtгเ๒є** · 22-11-13

Originally Posted by Eronisch

I didn't know about that extension, very usefull.

For other people who would like to try it out, here is the link: https://chrome.google.com/webstore/d...ammmilcgefonfh

Yep that's it. No problem.

**Secured** · 27-11-13

Originally Posted by Eronisch

I didn't know about that extension, very usefull.

For other people who would like to try it out, here is the link: https://chrome.google.com/webstore/d...ammmilcgefonfh

Why would you use a addon when chrome supports this directly from the developer console.
http://puu.sh/5uSc9.png

**שเ๒єtгเ๒є** · 28-11-13

Originally Posted by Secured

Why would you use a addon when chrome supports this directly from the developer console.
http://puu.sh/5uSc9.png

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.

Using iFrame to test your mobile in different screens

Thread Tools

Using iFrame to test your mobile in different screens

Re: Using iFrame to test your mobile in different screens

Re: Using iFrame to test your mobile in different screens

Re: Using iFrame to test your mobile in different screens

Re: Using iFrame to test your mobile in different screens

Re: Using iFrame to test your mobile in different screens

Re: Using iFrame to test your mobile in different screens

Re: Using iFrame to test your mobile in different screens

Re: Using iFrame to test your mobile in different screens

Re: Using iFrame to test your mobile in different screens

Re: Using iFrame to test your mobile in different screens

Re: Using iFrame to test your mobile in different screens

Advertisement