2014年11月4日火曜日

ホームページ　スマホでも見やすくなりました。

ラベル:
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上では、再現できます。
でも、実際のディバイス上では、上の記述がないと、可変グリッドが動かないってことです。

なにせ、独学の見よう見まねで作ってる高橋建築研究所サイトなので・・悩んだ挙句、解明。たいへんっス！

上の写真は パソコン仕事の備忘録　メモスタイルで紹介されていた、Responsinator で、PC上で確認した様子。実際のiPod、Google AdSense のPageSpeed Insightsの分析でも、確認済みなので、今度は、大丈夫・・
　　　

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)