Kaynağa Gözat

iPhone5 supported (no black screen)

soyjavi 13 yıl önce
ebeveyn
işleme
4eb6da69b8
2 değiştirilmiş dosya ile 175 ekleme ve 6 silme
  1. 33 6
      kitchen-sink/index.html
  2. 142 0
      kitchen-sink/index.package.html

+ 33 - 6
kitchen-sink/index.html

@@ -6,16 +6,43 @@
     <meta name="description" content="">
     <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
     <meta name="HandheldFriendly" content="True">
-    <meta name="MobileOptimized" content="320">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <meta name="format-detection" content="telephone=no">
     <meta http-equiv="cleartype" content="on">
-    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://lungo.tapquo.com/resources/icon@2x.png">
-    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://lungo.tapquo.com/resources/icon-72.png">
-    <link rel="apple-touch-icon-precomposed" href="http://lungo.tapquo.com/resources/icon.png">
-    <link rel="apple-touch-startup-image" href="http://lungo.tapquo.com/resources/default.png">
+
+    <!-- iPhone -->
+    <link href="http://lungo.tapquo.com/resources/icon-57.png" sizes="57x57" rel="apple-touch-icon">
+    <link href="http://lungo.tapquo.com/resources/startup-image-320x460.png" media="(device-width: 320px) and (device-height: 480px)
+             and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
+
+    <!-- iPhone (Retina) -->
+    <link href="http://lungo.tapquo.com/resources/icon-114.png" sizes="114x114" rel="apple-touch-icon">
+    <link href="http://lungo.tapquo.com/resources/startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px)
+             and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
+
+    <!-- iPhone 5 -->
+    <link href="http://lungo.tapquo.com/resources/startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px)
+             and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
+
+    <!-- iPad -->
+    <link href="http://lungo.tapquo.com/resources/icon-72.png" sizes="72x72" rel="apple-touch-icon">
+    <link href="http://lungo.tapquo.com/resources/startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px)
+             and (orientation: portrait)
+             and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
+    <link href="http://lungo.tapquo.com/resources/startup-image-748x1024.png" media="(device-width: 768px) and (device-height: 1024px)
+             and (orientation: landscape)
+             and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
+
+    <!-- iPad (Retina) -->
+    <link href="http://lungo.tapquo.com/resources/icon-144.png" sizes="144x144" rel="apple-touch-icon">
+    <link href="http://lungo.tapquo.com/resources/startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px)
+             and (orientation: portrait)
+             and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
+    <link href="http://lungo.tapquo.com/resources/startup-image-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px)
+             and (orientation: landscape)
+             and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
 
     <!-- Main Stylesheet -->
     <link rel="stylesheet" href="../src/stylesheets/css/Lungo.base.css">

+ 142 - 0
kitchen-sink/index.package.html

@@ -0,0 +1,142 @@
+<!doctype html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <title>KitchenSink - Lungo 2.0</title>
+    <meta name="description" content="">
+    <meta name="author" content="Javier Jiménez Villar (@soyjavi)">
+    <meta name="HandheldFriendly" content="True">
+    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <meta name="apple-mobile-web-app-status-bar-style" content="black">
+    <meta name="format-detection" content="telephone=no">
+    <meta http-equiv="cleartype" content="on">
+
+    <!-- iPhone -->
+    <link href="http://lungo.tapquo.com/resources/icon-57.png" sizes="57x57" rel="apple-touch-icon">
+    <link href="http://lungo.tapquo.com/resources/startup-image-320x460.png" media="(device-width: 320px) and (device-height: 480px)
+             and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
+
+    <!-- iPhone (Retina) -->
+    <link href="http://lungo.tapquo.com/resources/icon-114.png" sizes="114x114" rel="apple-touch-icon">
+    <link href="http://lungo.tapquo.com/resources/startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px)
+             and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
+
+    <!-- iPhone 5 -->
+    <link href="http://lungo.tapquo.com/resources/startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px)
+             and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
+
+    <!-- iPad -->
+    <link href="http://lungo.tapquo.com/resources/icon-72.png" sizes="72x72" rel="apple-touch-icon">
+    <link href="http://lungo.tapquo.com/resources/startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px)
+             and (orientation: portrait)
+             and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
+    <link href="http://lungo.tapquo.com/resources/startup-image-748x1024.png" media="(device-width: 768px) and (device-height: 1024px)
+             and (orientation: landscape)
+             and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">
+
+    <!-- iPad (Retina) -->
+    <link href="http://lungo.tapquo.com/resources/icon-144.png" sizes="144x144" rel="apple-touch-icon">
+    <link href="http://lungo.tapquo.com/resources/startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px)
+             and (orientation: portrait)
+             and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
+    <link href="http://lungo.tapquo.com/resources/startup-image-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px)
+             and (orientation: landscape)
+             and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
+
+    <!-- Main Stylesheet -->
+    <link rel="stylesheet" href="../package/lungo.css">
+    <link rel="stylesheet" href="../package/lungo.icon.css">
+    <link rel="stylesheet" href="../package/lungo.icon.brand.css">
+    <link rel="stylesheet" href="../package/lungo.theme.default.css">
+
+    <!-- App Stylesheet -->
+    <link rel="stylesheet" href="stylesheets/app.css">
+</head>
+
+<body class="app">
+    <section id="main" data-transition="slide">
+        <header  class="">
+            <nav class="left box">
+                <a href="#features" data-router="aside" data-icon="menu"></a>
+            </nav>
+            <div class="left">
+                <div class="centered title with-subtitle">
+                    Lungo
+                    <small class="subtitle">HTML5 Cross-Device Framework</small>
+                </div>
+            </div>
+        </header>
+
+        <article id="main-article" class="list indented scroll">
+            <ul>
+                <li class="dark">
+                    <strong>
+                    A framework for developers who want to design, build and share cross device apps.
+                </strong>
+                </li>
+                <li data-icon="brand html5" class="feature">
+                    <strong>HTML5 Optimized Apps</strong>
+                    Lungo Framework supports open web standards, such as HTML5, CSS3 and JavaScript. It brings consistent browser environment across mobiles, tvs and desktop devices.
+                </li>
+                <li data-icon="brand github-2" class="feature">
+                    <strong>Open Source Project</strong>
+                    Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
+                </li>
+                <li data-icon="book" class="feature">
+                    <strong>Powerfull JavaScript API</strong>
+                    Each new line of code in Lungo is welcome, we hope that Developers and restless minds help us to improve day by day this humble project.
+                </li>
+                <li data-icon="brand branch" class="feature">
+                    <strong>Multi-Device full support</strong>
+                    Is known that create apps for each platform is expensive, this situation is increased by the arrival of tablets and SmartTVs. Lungo will suit all of them creating a unique and amazing UX.
+                </li>
+
+                <li>
+                    <a href="https://twitter.com/intent/tweet?original_referer=http%3A%2F%2Flungo.tapquo.com%2F&text=@lungojs a framework for developers who want to design, build and share cross device apps" data-icon="brand twitter" target="_blank" class="button big theme" data-label="Tweet me"></a>
+
+                </li>
+            </ul>
+        </article>
+    </section>
+
+    <!-- Lungo dependencies -->
+    <script src="../src/lib/quo.debug.js"></script>
+    <script src="../package/lungo.js"></script>
+
+    <!-- LungoJS - Sandbox App -->
+    <script>
+        Lungo.init({
+            name: 'Kitchen Sink',
+            version: '2.0',
+            sugars: ['map', 'pull'],
+            resources: ['app/sections/layout.html',
+                        'app/sections/notification.html',
+                        'app/sections/list.html',
+                        'app/sections/icon.html',
+                        'app/sections/grid.html',
+                        'app/sections/form.html',
+                        'app/sections/aside.html',
+                        'app/sections/touchevents.html',
+                        'app/sections/layoutevents.html',
+                        'app/sections/splash.html',
+                        'app/sections/data-attribute.html',
+                        'app/sections/scroll.html',
+                        'app/sections/color.html',
+                        'app/sections/pull.html',
+                        'app/sections/carousel.html',
+                        'app/sections/environment.html',
+                        'app/asides/features.html',
+                        'app/asides/left.html',
+                        'app/asides/right.html']
+
+        });
+    </script>
+    <script src="app/app.js"></script>
+        <script src="app/events.notification.js"></script>
+        <script src="app/events.touch.js"></script>
+        <script src="app/events.pull.js"></script>
+        <script src="app/events.carousel.js"></script>
+        <script src="app/events.trigger.js"></script>
+</body>
+</html>