はじめての人は、はじめまして。
いつもブログを読んでくれている人は、いつもありがとうございます。
クリーニングはプロですが、プログラミングは初心者の神崎ですー。
viewportの設定が合わず四苦八苦
オイラが運営しているネクシークリーニングのWebサイトですが
基本的に外注しておらず、オイラが単独で開発を続けてます（笑
当初外注してましたが、色々と間に合わず。
見よう見まねでやってたら出来てしまったわけですが
基本的に右も左もわからず、
ほとんどの機能を検索して調べて、実験してを繰り返し
かなりチグハグで作ってしまってたわけです（笑
業務も順調なので、
オイラのチグハグデザインを、思い切ってデザイナーさんを招いて
リデザインしコーディングはオイラが担当してリニューアルサイトを
作ってる途中なのですが・・・。
iphoneで表示がおかしい！
そもそも、開発環境はECキューブなのでweb上でHTMLを入力していきます。
それをクロムブラウザーのスマホエミュレーターにて表示させて
画面上に思った通り表示されてるか見ながら作り
実機はandroidで確認し問題なく作っていってたのですが
iphon4sでの表示がおかしいと画像が送られてきました・・・。
どうした！CSSいじってる時に何か設定ミスって上書きしたか？と思い
すぐにandroidとエミュレーターで確認するも問題なし。
まさか、
iphoneの実機だと表示がおかしいのか？と思い
iphon6PULSで見てみるとビンゴ（笑
デザイナーさんから送られてきた画像の通り・・・。
どないしよーって思って色々調べてみた結果。
<meta name=”viewport” content=”width=device-width” />
$(window).bind(‘resize load’, function(){
$(“html”).css(“zoom” , $(window).width()/640 );
});
このメタネームの指定と、jsにて強制的に640サイズにリサイズされて
表示させてたのですが指定してたわけなのですが
どうもこれが原因でihoneの表示が崩れていました。
・・・
原因不明で何やってもだめだったので
googleでも推奨しているこのviewportの設定に変更。
ihoneとandroidで似た表示になりましたが
再度のwidth指定を640pxで作っているため
やっぱり表示はおかしい・・・。
というか拡大されたようになり文字も変に改行状態。
途方にくれてviewportにwidth＝640と実数を書き込んで見たところ
iphone、エミュレーター当では思った通りの表示に。
よっしゃーーーーー！と思って
実機のandroidで見ると・・・。
表示は拡大されたまま～～～～～～（汗
タップするとキチンと表示されます。
zoomの設定かと思いJSを組んでみるがうまく行かず。
またまた、途方にくれて何か方法が無いか調べてたところ
Androidの一部の端末ではwidth＝実数の入力が無視される事が判明
まじかーまた指定方法を最初からーと思ってしらべてたら
target-densitydpi=device-dpi で解決しました
androidでは、target-densitydpi=device-dpiを指定して表示が制御できると
検索してでてきたので、
今まで入力してたviewportの設定にカンマで区切ってtarget-densitydpi=device-dpiを追記。
・・・・（笑
無事解決できました。
はぁ、11月いっぱいでリデザインしたいのに
また技術検証を最初からしなおしーーーーとあせってましたが
1時間程度で問題解決。
それもこれも、あまり勉強せずに
webプログラミングをやってるオイラの苦い付けなのかもしれません。
検索しててviewportの設定の記事はたくさん出てきましたが
一応、オイラも備忘録としてブログ記事にしてみました・・・。
さて、続きを開発しよう・・・（汗
