カテゴリー: スマホ

キワ化学工業

グランドナビをアニメーション付きのドロップダウンと、スマホは階層付きのハンバーガーメニューにしなたいと要望。

 

ナビについて

スマホからPCの階層付きナビとして　

http://cm-creation.net/yoshida/localwork/?p=3728

を使えると思ってためしたのだが、padの横やPCなどで、liの項目数がたくさんあると多分css側でなってしまっているとおもうがナビ項目の文字がおりかえされてしまう。どうやっても解決できない。しかたないので上記の方法はバーガーメニューを表示させたいスマホからpad縦までとして実装する。

pcからpad縦については別のドロップダウンだけのナビとして実装。
http://cm-creation.net/yoshida/localwork/?p=3725

liの幅はクラスを別途つけてpxで調節。

 

全画面背景画像　スライド

メイン背景画像にjQuery.BgSwitcher　を使って表示させようとしたら、ローカルでは全部の画像が表示されるがサーバーでは画像が何枚か表示されない？コンフリクト？って思ったが、画像名の拡張子と画像名が間違っていただけだった。（

※スライドが何枚か表示されないようなことが起こったら、画像の名前や拡張子がコピペでちがっていたり、画像名が違っていることを疑うこと

ipad iphoneなどのタッチデバイスでscrollが効かない時

http://ochien.seesaa.net/article/357081256.html

-webkit-overflow-scrolling: touch がきかない場合

以前は iOS 系では「スクロールは2本指でできます」とか「iScroll を使いましょう」というのが定番でしたが、-webkit-overflow-scrolling: touch が登場してくれたおかげで、

.scroll {
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

という感じで CSS を書くだけで、1本指で、しかも慣性スクロールできるようになりました。
かなり楽な世の中になりました。

ちなみに Android でも Android 4.0.4 Safari/534.30 であれば、-webkit-overflow-scrolling: touch が動作しました。
が、scroll をつける div などの高さを設定しておかないとスクロールバーが表示されず、スクロールできませんでした。
Android でも -webkit-overflow-scrolling: touch を使いたいのにうまく動作しないという場合は、scroll させたい領域の高さを指定してみることをおすすめします

スマホ　モバイル　振り分け

<!–モバイルからのアクセスの時–>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js”></script>
<script type=”text/javascript”>
$(function(){
var agent = navigator.userAgent;
var redirectPass = ‘/index3.html’;
if(agent.search(/iPhone/) != -1 || agent.search(/iPad/) != -1 || agent.search(/iPod/) != -1 || agent.search(/Android/) != -1){
location.href = redirectPass;
}
});
</script>

 

※上記の設定だとリダイレクト先はドメイン直下のindex3.html。
テストサイトのcm-creation.net/index3.htmlはないからnot foundするので、テスト確認時はコメントアウトしておく。本サイトではドメイン直下にindex3.htmlあれば大丈夫。

スマホとtwitterのウィジット

スマホでウィジットの幅を100%にしているとandroid2ではwidthがオーバー？してしまい読み込み時100%として他の要素も読み込めずオーバーになり、タッチスクロールご戻るという変な挙動をした

#twitter-widget-0 {
width:100% !important;
}

なので下記にしたら大丈夫になった

#twitter-widget-0 {
width:95% !important;
}

スマホ androidではposition fixedは使えない

http://blog.webcreativepark.net/2011/12/07-052517.html

 

 

スマホでグランドナビを固定しようとしたが、バグで、固定要素がきえたりするのでpositionは仕えない。ＰＣページは大丈夫なので、しかたいがないが、スマホは

positon:static　で設定箇所をクリアするしかないかも。

http://www.htmq.com/style/position.shtml

 

 

new-unionのstudioで下記のように大目に高さをとればできなくもないが、スクロール時、要素の高さがある物が下へ入り込んで表示されないのでやめておく。

#stButtonFixed {
position: relative;
height: 200px;
}

.Studiofixed {
position: fixed;
top: 0px;
}

#classMenu {
margin-bottom: 40px;
height: auto;
margin-top:-180px;
padding-top:180px;

}

#timeContainer {
margin-bottom: 40px;
height: auto;
margin-top:-180px;
padding-top:180px;

}

#price {
height: auto;
margin-bottom: 40px;
clear: both;
margin-top:-180px;
padding-top:180px;
}
#facilitiesContainer {
height: auto;
width: 100%;
margin-bottom: 40px;
margin-top:-180px;
padding-top:180px;

}
#accessMapContainer {
height: auto;
width: 100%;
margin-bottom: 40px;
margin-top:-180px;
padding-top:180px;

}

 

#admissionContainer {
height: auto;
width: 100%;
margin-bottom: 40px;
margin-top:-180px;
padding-top:180px;

}

background-image のサイズを変更　background-size

http://tips.nishishi.com/css/background-size-css3.html

http://www.htmq.com/css3/background-size.shtml

background-size を設定することによって、変更できる。

スマホやタブレットの背景画像がぼやけるときに、タブレットなら、ＰＣの2倍の画像を作り,スマホならＰＣの画像の1/2設定にする

ＰＣ　44ｐｘ　×　44ｐｘ
#faqContaier .q {
background-image: url(../image/faq/q.gif);
background-repeat: no-repeat;
background-position: left top;
}

タブレット　88ｐｘ　×　88ｐｘ
#faqContaier .q {
background-image: url(../image/faq/q-t.gif);
background-repeat: no-repeat;
background-size:44px auto;
background-position: left top;

}

 

スマホ　(PC用の物を1/2で指定)
#faqContaier .q {
background-position: left top;
background-image: url(../image/faq/q.gif);
background-size: 22px auto;
background-repeat: no-repeat;
}

android の　box-sizing

http://blog.livedoor.jp/tacshock-code14/archives/6461487.html

 

p199  スマートフォンの為のＣＳＳ　　　フォームのデザイン

 

スマホではとっても楽になる
css3のbox-sizingプロパティ。 


box-sizing:border-box


とすると、paddingとborderをwidthやheightの中に含めてくれます。

心置きなく

width:100%;
padding:10px;


とかできます。 


でも、androidだと、box-sizingがそのままではうまくいかない。
（バグではないですけど）

androidの場合はwebkitのベンダープレフィクスをつければOK

box-sizing:border-box;
-webkit-box-sizing:border-box;