Last active
August 29, 2015 13:57
-
-
Save iTonyYo/9868650 to your computer and use it in GitHub Desktop.
Apple meta tags with jade template engine. Jade ' include ' allows you to insert the contents into another jade file simply.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // | |
| Build Passing. | |
| Doctype: HTML5 | |
| Jade: 1.3.0+ | |
| #TODO[x]: Basic Apple-Specific Meta Tag | |
| 'apple-mobile-web-app-capable', | |
| sets whether a web application runs in full-screen mode. The | |
| ' apple-touch-fullscreen ' alias is obsolete. It was never | |
| officially supported. As of iOS 7, it no longer works. | |
| Don’t use it. | |
| 'apple-mobile-web-app-status-bar-style' | |
| sets the style of the status bar for a web application. | |
| eg: content="default"|"black"|"black-translucent". | |
| 'apple-mobile-web-app-title', IOS6+ | |
| 'format-detection' | |
| #TODO[x]: Basic Setup Example | |
| - var basic = { | |
| 'apple-mobile-web-app-capable': 'yes', | |
| 'apple-mobile-web-app-status-bar-style': 'default', | |
| 'apple-mobile-web-app-title': '', | |
| 'format-detection': 'telephone=yes' | |
| } | |
| #TODO[x]: Apple Touch Icon ( Webpage Icons for Web Clip ): | |
| <link rel="apple-touch-icon" href="apple-touch-icon.png">, | |
| non-Retina iPhone, iPod Touch, and Android 2.1+ devices | |
| sizes="57x57", | |
| non-Retina iPhone, iPod Touch, and Android 2.1+ devices | |
| sizes="72x72", | |
| iOS ≤ 6, iPad mini and the first- and second-generation iPad | |
| sizes="76x76", | |
| iOS7+, iPad mini and the first- and second-generation iPad | |
| sizes="114x114", | |
| iOS ≤ 6, iPhone with high-resolution Retina display | |
| sizes="120x120", | |
| iOS7+, Retina-display iPhones | |
| sizes="144x144", | |
| iOS ≤ 6, iPad with high-resolution Retina display | |
| sizes="152x152", | |
| iOS7+, Retina-display iPad | |
| #TODO[x]: Touch Icon Setup Example | |
| - var icon = [ | |
| '57x57', | |
| '72x72', | |
| '76x76', | |
| '114x114', | |
| '120x120', | |
| '144x144', | |
| '152x152' | |
| ] | |
| #TODO[x]: Apple Startup Image ( In order to use a startup image, | |
| your page must be web app capable. That means setting the | |
| apple-mobile-web-app-capable meta attribute. ) | |
| size='320x460', iPhone | |
| size='640x920', iPhone, retina | |
| size='640x1096', iPhone 5/5s | |
| size='768x1004', iPad, portrait | |
| size='748x1024', iPad, landscape | |
| size='1536x2008', iPad, retina, portrait | |
| size='1496x2048', iPad, retina, landscape | |
| #TODO[x]: Startup Image Setup Example | |
| - var image = { | |
| a: { | |
| size: '320x460', | |
| media: '(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)' | |
| }, | |
| b: { | |
| size: '640x920', | |
| media: '(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)' | |
| }, | |
| c: { | |
| size: '640x1096', | |
| media: '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)' | |
| }, | |
| d: { | |
| size: '768x1004', | |
| media: '(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)' | |
| }, | |
| e: { | |
| size: '748x1024', | |
| media: '(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)' | |
| }, | |
| f: { | |
| size: '1536x2008', | |
| media: '(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)' | |
| }, | |
| g: { | |
| size: '1496x2048', | |
| media: '(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)' | |
| } | |
| } | |
| #TODO[x]: Dependencies | |
| initialization.jade (//gist.github.com/Tony-Stark/9d7359ff69ef8336b151) | |
| Author: 沈维忠 ( Shen Weizhong / Tony Stark ) | |
| Cell Phone: (+86) 15921299022 | |
| Github：//github.com/Tony-Stark/ | |
| Trello: //trello.com/shenweizhong/ | |
| 个人全球统一标识（ Gravatar ）：//en.gravatar.com/swzcowboy/ | |
| 个人主页（ Personal Homepage ）：//tony-stark.github.io/ | |
| Linkedin：//cn.linkedin.com/in/itonyyo/ | |
| Twitter: @iTonyYo, //twitter.com/iTonyYo/ | |
| Instagram：//instagram.com/itonyyo/ | |
| Facebook：//www.facebook.com/shenweizhong/ | |
| Google+: //plus.google.com/114960355664861539339/ | |
| Instagram: //instagram.com/itonyyo/ | |
| QQ：563214029, //user.qzone.qq.com/563214029/ | |
| Sina Weibo: //weibo.com/itonyyo/ | |
| WhatsApp：15921299022 | |
| 微信（ WeChat ）：iTonyYo | |
| Facebook Messenger：shenweizhong | |
| Skype：live:swzyocowboy | |
| Line：shenweizhong | |
| Email: [email protected], [email protected], [email protected], [email protected], [email protected] | |
| Version: 0.1.11-alpha | |
| Creation Date: ~ ( Tony ). | |
| Last Update: 2014.08.16 19:30 ( Tony ). | |
| - var staticBase = 'app/public/ajax/libs/img/icon/apple/' | |
| - var opts = {href: true, basic: true, icon: true, image: true, iconPrefix: 'apple-touch-icon', imagePrefix: 'apple-touch-startup-image'} | |
| - var basic = {'apple-mobile-web-app-capable': 'yes', 'apple-mobile-web-app-status-bar-style': 'default', 'apple-mobile-web-app-title': '沈维忠', 'format-detection': 'telephone=yes'} | |
| - var icon = ['57x57', '72x72', '76x76', '114x114', '120x120', '144x144', '152x152'] | |
| - var image = {a: {size: '320x460', media: '(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)'}, b: {size: '640x920', media: '(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)'}, c: {size: '640x1096', media: '(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)'}, d: {size: '768x1004', media: '(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)'}, e: {size: '748x1024', media: '(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)'}, f: {size: '1536x2008', media: '(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)'}, g: {size: '1496x2048', media: '(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)'}} | |
| mixin set_basic_apple_meta() | |
| each val, index in basic | |
| meta(name=index, content=val) | |
| mixin set_touch_icon() | |
| - for (var i = 0; i <= icon.length; i++) | |
| if !opts.href | |
| if i === 0 | |
| link(rel = opts.iconPrefix, href = '') | |
| else | |
| link(rel = opts.iconPrefix, sizes = icon[i-1], href = '') | |
| else | |
| - var icon_name = opts.iconPrefix + '-' + icon[i-1] + '.png' | |
| if i === 0 | |
| link(rel = opts.iconPrefix, href = staticBase + 'apple-touch-icon.png') | |
| else | |
| link(rel = opts.iconPrefix, sizes = icon[i-1], href = staticBase + icon_name) | |
| mixin set_startup_image() | |
| if !opts.href | |
| each val, index in image | |
| link(rel = opts.imagePrefix, href = '', media = val.media) | |
| else | |
| each val, index in image | |
| link(rel = opts.imagePrefix, href = staticBase + opts.imagePrefix + '-' + val.size + '.png', media = val.media) | |
| if opts.basic | |
| +set_basic_apple_meta() | |
| if opts.icon | |
| +set_touch_icon() | |
| if opts.image | |
| +set_startup_image() |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment