iPhone 5 portrait · width: 320px
iPhone 6 Plump landscape · width: 736px
Crappy Android portrait · width: 240px
iPad landscape · width: 1024px
ホームページが、こんな感じで、ディバイスの幅によってレイアウトが変化して、見やすくなりました。上の写真は、作品紹介のページ。
実は、今年の3月には、できていたはずだったのですが、できていなかった。
何故って、PC上では、うまく動いていたのに、実際に、スマホで見ると動いていない。
えー！
私、いまだガラケーなので、確認できなかった。
Google AdSense のPageSpeed Insightsで、分析すると、やっぱ動いてなくて、変だと思っていたが・・息子に借りて見たら、やっぱり駄目！
そこで、本気でチェック。息子のiPod借りて。
散々、悩んだ挙句、解決！！
原因は、htmlの冒頭の前後の記述。
***今まで****
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns:fb=\"http://ogp.me/ns/fb#\">
<!-- DW6 -->
<head>
<!-- Copyright 2005 Macromedia, Inc. All rights reserved. -->
<meta name=\"msvalidate.01\" content=\"11E136BBFA0A43AB8F375EC105AE748D\" />
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=shift_jis\" />
***修正後***
<!doctype html>
<!--[if lt IE 7]> <html class=\"ie6 oldie\"> <![endif]-->
<!--[if IE 7]> <html class=\"ie7 oldie\"> <![endif]-->
<!--[if IE 8]> <html class=\"ie8 oldie\"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class=\"\">
<!--<![endif]-->
<head>
<meta charset=\"utf-8\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">
としなければ、ならなかった。
これで、ちゃんと、再現できました。
原因は、Adobe Dreamweaverを使っていて、可変グリッド以前のTemplateを改造し、レイアウト変更。その際、jsやｃｓｓの記述だけを直せばいいと思ってた。
実際、これだけで、PC上では、再現できます。
でも、実際のディバイス上では、上の記述がないと、可変グリッドが動かないってことです。
。
