27 March 2013



Tablets Trump Smartphones on the World (Web) Stage

For the first time, tablets outsurfed smartphones on the web.

According to Adobe’s Digital Index, global websites are now getting more traffic from tablets than they are from smartphones. Of planet Earth’s web page traffic, 8% is accessed by tablets and 7% by smartphones. Adobe’s data comes from analyzing 100 bil­lion vis­its to 1000+ web­sites world-wide.

The significance of the boost should not be lost on advertisers, markets, developers and anyone else seeking to monetize the platform as it surfs the web. Though tablets and smartphones have similar capabilities – gaming, shopping, communication – that can be monetized, the tablet experience lends itself to avenues that smartphones cannot

Other data that Adobe collected shows that 13.5% of all online sales were trans­acted via tablets. Analysis of stats collected at the recent Super Bowl showed that online view­er­ship via tablets dou­bles dur­ing big sport­ing events.

Additionally, the UK is the country that browses the web more than any other nation, 12.5% of web browsers there are using tablets, compared with 9.1% of US browsers.





■ デバイス解像度を検知するしくみ

スマートフォンやタブレットは仮想的な画面幅をブラウザに返す。iOS (Safari)では980px,Android (Webkit)では800pxという値が使われるらしい。しかし、実際の画面解像度は次の通りばらばら。総じて仮想的な解像度980pxだったり800pxというものより画面幅は狭い。

iPhone 3G320 x 480
iPhone 4640 x 960
iPhone 5640 x 1136
iPad768 x 1024
iPad 41536 x 2048
Galaxy S II480 x 800
Xperia ray480 x 854
Xperia ray800 x 1280


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=2.0,minimum-scale=1.0,user-scalable=1" /> <title>タイトル</title> </head> <body> 〜



div#container { position: relative; margin: 0 auto; width: 800px; } @media screen and (max-width: 639px){ #container { position: static !important; width: auto !important; margin: 0 !important; } }

Internet Explorer 8では @media タグを受け付けないため、例えば次のようなCSSとすると問題が起こることがある。(本来は、このように書くべきなのだろうが、この世にInternet Explorerという害悪が存在している限り、理論通り書くことは不可能)

@media screen and (min-width: 640px){ #container { position: relative; width: 800px; margin: 0 auto; } } @media screen and (max-width: 639px){ #container { position: static; width: auto; margin: 0; } }

■ 左右二分割のレイアウトを、狭小画面では上下に並べて表示する

#alpha, #beta { display: inline; /* ie win bugfix */ float: left; margin: 0px; } #alpha { width: 180px; } /* 左ペイン */ #beta { width: 600px; } /* 右ペイン */ @media screen and (max-width: 639px){ #alpha, #beta { width: auto !important; float: none !important; } }

■ ソースコードなどの囲み枠を横方向伸縮可能にする

pre.code, div.code, pre { padding: 0px 5px; font-family: monospace; background-color: #e6e6fa; /* lavender */ border: 1px solid #aaaaaa; white-space: pre; overflow: scroll; overflow-x: scroll; width: 570px; } @media screen and (max-width: 639px){ pre.code, div.code, pre { width: auto !important; } }


code { padding-left: 5px; padding-right: 5px; font-family: monospace; background-color: #ddc; white-space: pre-wrap; word-wrap: break-word; }

■ 画像を自動縮小する

@media screen and (max-width: 639px){ img { max-width: 95% !important; height: auto; } }