だんだん魚のアラに飽きてきた犬吉です。

ひっさしぶりにスマートフォン専用ページのコーディングをしました。
そう横幅640pxでできたデザインデータを320px幅に直しながらするヤツです。

ちなみに今回は、PCサイトとスマホサイトは別ソースです。

以下、メモ書きです。

基本的な注意点

html

・imgタグのwidthとheightは半分にする。なので画像のスライスは偶数になるよう調整。

メタタグは、いろいろあるが下記を選択

css

paddingとmarginも半分にする。

背景画像は、

background-sizeプロパティでサイズ指定。もちろん半分。

js

to-Rさんの下記ページのスクリプトがよかった。

続:Androidブラウザでviewportのwidth指定 – to-R

 

Android(アンドロイド)のシュミレーター

iPhoneは持ってるので、それで確認。

さてAndroidは持ってないので、シュミレーターで済ませることにした。

s150127

 

Genymotionってのが良いらしい。動作早く、Mac、Windows版と両方あるのもポイント高い。

・Genymotion公式ページ
https://www.genymotion.com/

使用までの手順(Macの場合)は、

  1. 上記サイトで会員登録
  2. フリー版をダウンロードしてインストール
  3. Virtualbox(MacとWindowsなど様々なOSを同時使用できるようにする無料の仮想化ソフト)を使用するので、まだ入れてない場合はインストール(こちらのサイト
  4. Genymotionを起動。私は一回Shell版を起動させたけどたぶん必要ない。
  5. Virtualboxで仮想マシンをひとつも作ってない場合は、新しく作るか聞かれるのでOK。
  6. 「add」から好きなAndroidを選んでインストール。
  7. インストール済みのAndroidを選択して「Start」でOK

htaccessで振り分け

PC版とスマートフォン版サイトを自動振り分けする方法

上記ページをとても参考なった。

スマホサイトからのPCページヘのリンクも対応できてるのが良い。