How to make websites 3DS formatted/fitted: Difference between revisions

← Older edit Newer edit →

@@ Line 1: / Line 1: @@
 Hello. I am Joshi, the creator of [http://joshi3ds.do.am Joshi 3DS], and I am here to teach you how to make your website 3DS compatible (although it may turn out to be sized as if it's DSi compatible). Here's a website "full" HTML code example:
-{| class="wikitable" width="20%" !
+<html>
-!<html>
+<meta name="viewport" content="width=400">
-!<meta name="viewport" !content="width=400">
+<title>YOUR TITLE</title>
-!<title>YOUR TITLE</title>
+<head>
-!<head>
+<style>
-!<style>
+body{margin:0;}
-!body{margin:0;}
+#topscreen{width:400;height:220;overflow:hidden;}
-!#topscreen{width:400;height:220;overflow:hidden;}
+#bottomscreen{width:320;height:212;overflow:hidden;margin:0 auto;}
-!#bottomscreen{width:320;height:212;overflow:hidden;margin:0 auto;}
+</style>
-!</style>
+</head>
-!</head>
+<body>
-!<body>
+&lt;div id="topscreen">TOP SCREEN CONTENT</div>
-!&lt;div id="topscreen">TOP SCREEN CONTENT</div>
+&lt;div id="bottomscreen">BOTTOM SCREEN CONTENT</div>
-!&lt;div id="bottomscreen">BOTTOM SCREEN CONTENT</div>
+<script>
-!<script>
+window.setInterval(function();{
-!window.setInterval(function();{
+window.scrollTo(40,220);
-!window.scrollTo(40,220);
+}, 50);
-!}, 50);
+</script>
-!</script>
+</body>
-!</body>
+</html>
-!</html>}
 Note: "margin:0 auto;" means that the content in the area of the section that "margin:0 auto;" is in, will be automatically centered. BTW the script at the bottom auto-scrolls the page, even if you scroll elsewhere.