Más contenido relacionado La actualidad más candente (20) Similar a スマートフォンサイトの作成術 - 大川洋一 (20) 2. • Hirokazu Okawa
twitter : @okyawa
•
3. •
•
CentOS
Apache
PostgreSQL
PHP
15. •
body {
-webkit-text-size-adjust: none;
}
20. HTML
• HTML
• Javascript DOM
• PHP
31. •
•
•
obj.getItem(key)
•
•
33. //
if (window.sessionStorage) {
sessionStorage.clear();
}
//
if (window.sessionStorage) {
var key = 'go=product-list&mode=line&id=4page=1';
sessionStorage.setItem(key, jsonData);
var obj = JSON.parse(jsonData);
jQuery(obj).each(function(index, jsonElement) {
// preload image
new Image().src = jsonElement.photo.url;
});
}
34. //
var key = 'go=product-list&mode=line&id=4page=1';
var parseStrageData = null;
if (window.sessionStorage) {
var strageData = sessionStorage.getItem(key)
if (key) {
try {
var parseStrageData = JSON.parse(strageData);
} catch (e) {
parseStrageData = null;
}
}
}
if (parseStrageData) {
//
} else {
// Ajax
}
40. <li id="listbox_132">
<a href="javascript:void(0);">
<img id="thumbnail_132" class="thumbnail_btn" src="thumnail_product01.png">
</a>
</li>
var mainPhoto = [];
mainPhoto[120] = 'product01.jpg';
mainPhoto[132] = 'product02.jpg';
mainPhoto[181] = 'product03.jpg';
mainPhoto[247] = 'product04.jpg';
jQuery('.thumbnail_btn').each(function(index, elem) {
var num = elem.id.replace(/thumbnail_/,'');
var mainImage = new Image();
mainImage.onload = function() {
//
};
mainImage.src = mainPhoto[num];
});
42. HTML input type
• tel
iPhone
• number
• email type
• url
49. var autoFitTextareaHeight = function (elem, keyCode, fit) {
// backspace or delete or onblor
if (keyCode === 8 || keyCode === 46 || fit) {
elem.style.height = 'auto';
}
if (elem.offsetHeight < elem.scrollHeight) {
elem.style.height = elem.scrollHeight + 'px';
}
}
autoFitTextareaHeight(elem);
jQuery(elem).bind('keyup', function (event) {
autoFitTextareaHeight(event.target, event.keyCode, false);
});
jQuery(elem).bind('blur', function (event) {
autoFitTextareaHeight(event.target, event.keyCode, true);
});
54. Android
• orientationchange
resize
window.addEventListener('resize', orientFunc, false);
55. • window.onresize iPhone
(maximum call stack size exceeded)
• iPhone
var eventName = 'resize';
if (-1 < navigator.userAgent.indexOf('iPhone') || -1 <
navigator.userAgent.indexOf('iPod')) {
eventName = 'orientationchange';
}
window.addEventListener(eventName, sampleFunc, false);
62. iPhone
20px
• iPhone GS 60px
320px × 480px
356px
• iPhone
640px × 960px
( 320px × 480px)
44px
63. Android
• 320px × 480px
• 480px × 800px
• 480px × 854px
• 640px × 960px
• 960px × 480px
•
320px
70. •
651-0096 651-0096
•
meta
<meta name="format-detection" content="telephone=no"/>
71. YouTube
<a href="youtube: ID"> </a>
<a href="http://www.youtube.com/v/ ID"> </a>
<a href="http://www.youtube.com/watch?v= ID"> </a>
•a
YouTube
• YouTube
YouTube
73. <a href="maps:q= "> </a>
<a href="http://maps.google.com/maps?q= "> </a>
<a href="http://maps.google.co.jp/maps?q= "> </a>
<a href="http://maps.google.co.jp/maps?q= , + ">
</a>
91. PC
<link media="screen and (min-device-
width:481px)" rel="stylesheet" type="text/
css" href="pcsite.css" />
iPhone
<link media="only screen and (max-
device-width:480px)"
href="smartphone.css" type="text/css"
rel="stylesheet" />
94. • Mozilla/5.0 (iPhone; U; CPU iPhone OS 3_1_2 like Mac OS X; en-us) AppleWebKit/
528.18 (KHTML, like Gecko) Version/4.0 Mobile/7D11 Safari/528.16
• Mozilla/5.0 (iPod; U; CPU iPhone OS 3_1_2 like Mac OS X; en-us) AppleWebKit/
528.18 (KHTML, like Gecko) Version/4.0 Mobile/7D11 Safari/528.16
• Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like
Gecko) Version/3.0 Mobile/3A100a Safari/419.3
• Mozilla/5.0 (Linux; U; Android 1.6; ja-jp; SonyEricssonSO-01B Build/R1EA018)
AppleWebKit/528.5+ (KHTML, like Gecko) Version/3.1.2 Mobile Safari/525.20.1
• Opera/9.80 (J2ME/MIDP; Opera Mini/5.0.0176/1150; U; ja) Presto/2.4.15
• BlackBerry9000/4.6.0.224 Profile/MIDP-2.0 Configuration/CLDC-1.1 VendorID/220
96. • •
• touchstart • gesturestart
• touchend • gesturechange
• touchmove • gestureend
• touchcancel
97. • mousewheel
•
2
• 2
1
