神崎健輔について 趣味

iphoneとandroidでスマホ版サイトの表示がチグハグな際のviewport設定

投稿日:

はじめての人は、はじめまして。
いつもブログを読んでくれている人は、いつもありがとうございます。
クリーニングはプロですが、プログラミングは初心者の神崎ですー。

imgres

viewportの設定が合わず四苦八苦

オイラが運営しているネクシークリーニングのWebサイトですが
基本的に外注しておらず、オイラが単独で開発を続けてます(笑
当初外注してましたが、色々と間に合わず。

見よう見まねでやってたら出来てしまったわけですが
基本的に右も左もわからず、
ほとんどの機能を検索して調べて、実験してを繰り返し
かなりチグハグで作ってしまってたわけです(笑

業務も順調なので、
オイラのチグハグデザインを、思い切ってデザイナーさんを招いて
リデザインしコーディングはオイラが担当してリニューアルサイトを
作ってる途中なのですが・・・。

iphoneで表示がおかしい!

そもそも、開発環境はECキューブなのでweb上でHTMLを入力していきます。
それをクロムブラウザーのスマホエミュレーターにて表示させて
画面上に思った通り表示されてるか見ながら作り
実機はandroidで確認し問題なく作っていってたのですが

iphon4sでの表示がおかしいと画像が送られてきました・・・。

名称未設定-1

どうした!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で見ると・・・。

Screenshot_2015-11-23-12-49-25

表示は拡大されたまま~~~~~~(汗
タップするとキチンと表示されます。
zoomの設定かと思いJSを組んでみるがうまく行かず。

またまた、途方にくれて何か方法が無いか調べてたところ

Androidの一部の端末ではwidth=実数の入力が無視される事が判明

まじかーまた指定方法を最初からーと思ってしらべてたら

target-densitydpi=device-dpi で解決しました

androidでは、target-densitydpi=device-dpiを指定して表示が制御できると
検索してでてきたので、

今まで入力してたviewportの設定にカンマで区切ってtarget-densitydpi=device-dpiを追記。

・・・・(笑
無事解決できました。

はぁ、11月いっぱいでリデザインしたいのに
また技術検証を最初からしなおしーーーーとあせってましたが
1時間程度で問題解決。

それもこれも、あまり勉強せずに
webプログラミングをやってるオイラの苦い付けなのかもしれません。

検索しててviewportの設定の記事はたくさん出てきましたが
一応、オイラも備忘録としてブログ記事にしてみました・・・。

さて、続きを開発しよう・・・(汗

スポンサードリンク

スポンサードリンク

-神崎健輔について, 趣味
-, , , , , , , , , ,

執筆者:

ABOUTこの記事をかいた人 神崎健輔

クリーニング店を経営しつつ、ITベンチャーも起業した国家資格を取得したクリーニング師でありシミ抜き職人でありながら、全国どこからでも受注が可能な宅配ネットクリーニングサービスやWEBサイトを開発するwebプログラマー。 自分の経験や知識を元に、ブログを中心に雑誌・テレビ・ラジオなどの各メディアにも出演し便利で楽になる洗濯術を発信中。クリーニングが不要に なるくらいのお洗濯やシミ抜きとちょっとITの知識を届けしていきたいです。

関連記事

ELLY99_garasugoshinoyasasiisekai-thumb-autox600-16184

ウェディングドレスを洗う時にいつも悩む事。

はじめての人は、はじめまして。 いつもブログを読んでくれている人は、ありがとうございます。 今日は朝からドレスを仕上げながら腕がつった神崎です(汗 ウェディングドレス洗ってみました。 最近は、いろんな …

no image

最近は睡魔に勝てない(汗

初めての人は、はじめまして。 いつもブログを読んでくれている人はありがとうございます。 今日はイオン有家の総会で総会会場からブログ書いている神崎です。 一昨日、昨日と夜はブログ書いたり webプログラ …

人生初のマラソンレースに参加してみた。in小浜湯YOUマラソン大会!

初めての人は、初めまして。 いつもブログを読んでくれている人はありがとうございます。 昨日は、やはり夜はくたばってた神崎ですー。 走らなければならないレースがそこにはある。 9月から走り始めて3ヶ月ほ …

念願のあれに出会う。

今日は、東京出張ちゅうの神崎ですー。 夜は夜で予定がいっぱいなので、 今日はブログ雑でごめんなさい〜。 朝はとにかく雪がやっぱり残ってて 飛行機飛ぶのか心配でしたが 人力・・・で飛行機を誘導し って・ …

13699503_1734512980170788_618771101_o

一期一会の繋がりってとっても大事だねって思った朝。

初めての人は、初めまして。 いつもブログを読んでくれている人は、ありがとうございます。 ラジオ出演を電話来るまですっかり忘れていたため空気イスで反省中の神崎です(汗 一期一会を大切にしてますか? 今朝 …

スポンサーリンク

スポンサーリンク

クリーニングを便利に

CLEANING PR



家事、子育てで忙しくても自分らしい「キレイな衣類」着ていたいと思っているあなたには、ネット宅配クリーニングサービスである「ネクシー」がおすすめです。

ネット宅配クリーニング 店の中でも80周年を超える豊富な知識と技術、クリーニング職人集団のクリーニング店だから、あなただけに合った便利で高品質の衣類を受け取ることができます。

ハカセに依頼

TRY HAKASE



育児や家事に忙しくてクリーニングに持って行くのもままならない、もっとクリーニングが便利だったらなと考えてたあなたに使って欲しい「ネクシー」で家から一歩もでずにクリーニングに出してみませんか?

たったの3ステップで簡単にクリーニングに出してキレイな洋服が帰ってくるのを待つだけ。今まで クリーニングに持って行く、取りに行くために割いてた時間を、もっと別の事に使う事ができますよ!

洗濯ハカセ

THIS HAKASE

「 洗濯ハカセ 」
株式会社クラスタス CTO
有限会社白洋社 部長

神崎健輔

スポンサードリンク