Notice: Undefined variable: objtype in /home/sites/heteml/users/n/e/w/new-can/web/blog/mt-dynamic.php on line 180

Notice: Undefined variable: objtype in /home/sites/heteml/users/n/e/w/new-can/web/blog/mt-dynamic.php on line 183
小手先程度のスマートフォン対応
Memory-01 Memory-02 Memory-03 Memory-04 Memory-05

From the author's New-Can

  • 当サイトは、IE11&Edge&Chrome58&Firefox53&OPERA31&Safari5…以上の環境で動作をなんとなく確認済です。全てのブラウザに対して、素人が完璧に対処することは至難の業です…。
  • スマートフォンでも、Android4.2/5.0&iOS10の環境で“必要最低限の動作は確認済”です。PCと同様のレイアウトで概ね閲覧可能ですが、解像度により一部非表示となるケースがあります。
  • 記事内で掲載されている一部画像は、ダブルクリックするとポップアップ画面経由で拡大されます。
  • 足跡を残す際は、画面左側にある“おきてがみ”機能も利用して下さい。
  • 白い頁が全面に出力されてしまった場合などは当方へ報告して下さい。メールフォームは、“検索&アーカイブメニュー頁の中央”に用意してあります。

小手先程度のスマートフォン対応 

user-pic

Written  By  New-Can   [ 2011年11月14日 23:02 ]     

Category  06-C. 各種薀蓄他      BBS


自分がスマホを使い始めて、はや4ヶ月経ちましたが…
このサイトのアクセスログをチェックしてみると、やはりスマホユーザーの方…それなりにいました。


例えば、移動中のWeb検索…捗りますからね。


そこで、こちらのブログも…
自分も1ユーザーとして閲覧してみるか…」という感じで、大分前に利用してみたのですが、チョットしたところが不親切。解像度の問題もありますし、仕方ありませんけど…。


さらに、このサイトは元々PC用という考えしかなかったし…
それはそれで割り切っても良かったのですが、いつまでも放置しておくのは、技術者の端くれといえど、なんとなく恥ずかしい気分だったので、「原則PCからの閲覧」という大前提に立ち、“チョットした親切心程度の対応”を施してみることにしました。


あくまで親切心程度の対応なので、取り急ぎ左メニューをカットして…
スタイルシートを中心とした小手先対応」という程度ですが、以下に簡単に纏めてみました。


【html側に改修を加えた内容】

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, maximum-scale=0.6, width=device-width, user-scalable=no" />
~以下、割愛~
<link rel="stylesheet" href="スマホ用スタイルシート" type="text/css" media="only screen and (max-device-width:480px)" />
<link rel="stylesheet" href="従来から使用しているPC用スタイルシート" type="text/css" media="screen and (min-device-width:481px)" />
<!--[if IE]>
<link rel="stylesheet" href="従来から使用しているPC用スタイルシート" type="text/css" />
<![endif]-->

※上記の他、スマホの際は非表示とする“class定義”を追加しております。


上段3行はiOS対応、下段3行は“横が480px迄の場合はスマホ対応”という感じでしょうか。
それ以外は、“PCと同様の表示”という感じで、現行のcssファイルを使用するという、その道のプロには笑われそうな、超ザックリ仕様です…。「所詮、自分は素人だし、時間もないし…許して~!」としか言いようがありません。

尚、下段の3行目はIE対策です。IEらしい問題といえば、らしいのでしょうが、、、
“media="~-device-width:~px"”を認識しないのは残念です…(;^^)

【スタイルシートに追加した内容】

◎bodyに対して追加
-webkit-text-size-adjust:100%
◎適宜追加した命令
display: none!important


細かいことを書けば色々あるのでしょうが…
最低限の知識を有している方であれば、これだけで小手先スマホ対応は十分可能でしょう。下段の設定に関しては、個人的には表示する必要性を感じなかった箇所に対してはガンガン入れました。


余談ですが、この作業の際に役立ったのが、先日購入したiPod touch。
Androidのスマホと比較しながら、作業を行うことができたので、思ったほど時間はかかりませんでした。

<Postscript>

作業後、この記事を読んでたら…
今よりも綺麗になりそうな気がしたので、そのうち時間がある際に追加対応を行うかもしれません。


- Entry Site -

にほんブログ村  BlogPeople  ブログ王

AlphaPolis  人気blogランキング  info-blogrank(article)  ブログ掲示板神奈川県

Thank you so much to read My Blog. I hope it's a fine day for you. See ya!

 

From the Same Category...

§この記事のメインカテゴリは、「06-C. 各種薀蓄他」です。


From the Same Date in a Different Year...

§記載者が過去を振り返りたくなったときのために掲載しております…m(__)m


Related Posts with Thumbnails