ページにほんの一行外部ファイルを加えるだけで、iPhone, iPadなどのiOSをはじめ、Android, Blackberry, Windows Phone, Window Tabletなどスマフォやタブレット、デスクトップなどのデバイスを判定し、簡単に条件付きのCSSやJavaScriptを利用できるにするスクリプトを紹介します。 Device.js -GitHub Device.jsの使い方 Device.jsのデモ Device.jsの使い方 Device.jsの実装は、簡単です。 外部ファイルとして、当スクリプトを記述するだけです。 <script src="device.js"></script> スクリプトを設置すると、表示デバイスに基づいて<html>に適切なclassを付与します。 iPhoneでアクセスすると、こんな感じに。 <html class="ios ipho
PC 版の Google Chrome や Safari で見たときにユーザビリティーが落ちるから。 以上。 で終わってしまうと記事にならないので、ちゃんと説明しておく。 そもそも -webkit-text-size-adjust とは何か iPhone や Android のブラウザーは、縦向き (Portrate mode) と横向き (Landscape mode) の文字サイズを自動調整する機能がある。 これを制御するのが CSS の -webkit-text-size-adjust である。 文字サイズ自動調整の具体例 次のような HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-
Firefox OS が面白そう、というので少し触ってみました。 Firefox OS はWeb 標準ベースの開発を基礎としたモバイル端末用プラットフォーム、要は HTML と JavaScript と CSS でアプリケーション開発できるモバイル端末用の OS。間もなく Developer Preview Phone な実機が発売されるというのでにわかに盛り上がりを見せているみたいです。 Firefox OS が目指すところは Web 標準による、開発者がロックインされないオープンなプラットフォーム。iOS や Android の昨今の状況を見れば、そのアンチテーゼになるプラットフォーム構想があってもおかしくないわけで、まさにそれを目指しているようですね。 いったいどんなものかという概観は dynamis さんによるスライドが分かりやすい。 Firefox OS from dynamis
Media Queries初心者でも分かりやすく解説された、スマートフォンやタブレットやデスクトップなど異なる表示サイズごとに最適なレイアウトを提供するResponsive Web Desingのチュートリアルを紹介します。 Responsive Design in 3 Steps [ad#ad-2] 下記は各ポイントを意訳したものです。 Step 1: METAタグ Step 2: HTMLの構造 Step 3: Media Queries さらに実践的な使い方を学びたい人に Step 1: METAタグ スマートフォンなどで採用されているモバイル用ブラウザは、表示するHTMLページの大きさをビューポートの幅に(主に)縮小してフィットさせます。 まずは、この設定をMETAタグを使用して等倍で表示するようにしましょう。 HTML <head>~</head>に下記を記述します。 <meta
Due to lack of resources to maintain the Unicorn project, W3C stopped providing this on-line service as of 31 March 2023. See 2023-02-15 W3C Homepage news. The source code is available on GitHub under the W3C Software license. Anyone can run it for themselves, fork it. Copyright © 2023 World Wide Web Consortium. W3C® liability, trademark and permissive license rules apply.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く