スマホ用の表示に切り替えていたはずが・・・。

 

 

今まで何度もこのブログで、Parllet（個人で作成・公開しているアルファ版のWeb家計簿）は

「スマホからは使えません」

と言っておったのですが・・・。

 

スポンサードリンク

 

 

はい、ご推察のとおり、使うことが出来ておりました・・・。

（現在は対応済みで、今度こそ使うことは出来ません。）

 

どうもスミマセン！

一重に私の技術不足と知識不足と認識の甘さ（一重じゃなくて三重？）が原因でして・・・。

 

■ どんな条件下で使えてしまっていたか

条件は簡単で、 スマホの画面の自動回転が ON の状態で横向きにすると冒頭のイメージのように表示され、使えてしまっておりました。

（過去記事のレスポンシブWebデザイン導入計画シリーズ（その１・２・３・４・５・６・７・８・９）でのタブレットレイアウトに切り替わっていました。）

 

縦向きの時には

と表示されて使えない状態であり、

私はその状態を見て安心してしまっていたということです・・。

 

■ どう切り替えていたか

手法はいろいろあるようですが、私の場合はユタシステムさんの

PC用とスマホ用の表示切り替えをCSSだけで行う方法(その1)

を参考にさせてもらって CSS で切り替えておりました。

 

以下のように記述し、

PC からは "main.css" 、スマホからは "smart.css"

を読み込むようにした（つもりになった）のです。

＜link media="only screen and (max-device-width:480px)" href="/public/stylesheets/smart.css" type="text/css" rel="stylesheet" /＞
＜link media="screen and (min-device-width:481px)" href="/public/stylesheets/main.css" type="text/css" rel="stylesheet" /＞

 

■ どこで勘違いしたか

上記記述を取り入れた後、最初は

「単純にブラウザの幅で判断してる？」

と思って PC 上のブラウザの幅を変えてみました。

そして幅を変えても smart.css の見た目に変わらなかったため、私は

「"device-width" というだけあって、デバイスの幅によって判定しているんだ。」

と認識し、そして

「そかそか、デバイスの幅なんて変わる訳無いよね～。アホか俺は！若い子達はこんなの、"device-width" って名前見た瞬間に分かんだろな～。あ～やだやだ！歳は取りたくないね～。」

なんて、

"年齢による頭の回転の遅さと勘の悪さ”

にさらに輪を掛けて

"的外れな決め付け"

という救いようのない勘違いをしてしまったのです。

 

そうではないんですね～。

少なくとも

「スマホで画面が回転した場合に device-width は変わるんだ」

ということがハッキリ分かりました。

私が行っている "体当たり手法" では、このように痛い目に遭ってみて初めて分かることだらけです。

いつもの繰り返しになりますが、 Parllet（パレット） をご利用中の方、また今後ご利用して頂ける方に置かれましては、その旨十分ご理解の上でのご利用をお願いいたします。

 

■ 今回の対応は

私：「device-width のとこを拡げちゃうとな～、今度はタブレットからも使えなくなっちゃうもんな～・・。」

私：「タブレットは・・・」

私：「・・・」

私：「！？」

 

えっと～・・、そもそも私はタブレットを持っておりません。

・・はい、持ってないんです。

スマホから使えないようにしたのは、自分のスマホから Parllet（パレット） を使ってみて、あまりにもボロボロだったからなんですが、そういう意味では「タブレットでは大丈夫」とも言えないんです。

はい！今更です！ごめんなさい！

 

そのことも踏まえて、今回

"スマホ・タブレットからは使えない"

ということにさせて頂きました。

上の方で書いた "レスポンシブWebデザイン導入計画シリーズ" の続きは今後も必死で頑張って体当たりしていく所存ですので、それまで何卒ご勘弁を！

 

ということで、記述を以下のように修正

＜link media="only screen and (max-device-width:768px)" href="/public/stylesheets/smart.css" type="text/css" rel="stylesheet" /＞
＜link media="screen and (min-device-width:769px)" href="/public/stylesheets/main.css" type="text/css" rel="stylesheet" /＞

 

横向きでも使えない状態になりました。

 

私のように、

「スマホやタブレットから使えないようにしたい！」

という方はあまりいらっしゃらないと思いますが、

「スマホではこの CSS を読み込むぞ！」

のつもりで私と同じ手法を使っていた場合は、

スマホを横向きにした時には device-width が変わるということにご注意下さいませませ！

 

タグ：Parllet 体当たり 公開アプリ 技術 CSS レスポンシブWebデザイン