【メモ】【iPhone】【Safari】【css】慣性スクロールAdd Star
慣性スクロール(ゆっくり止まるような動き)を実装するには、
「-webkit-overflow-scrolling: touch;」の指定が必要です。
つまり、
div.scroll {
overflow: auto;
-webkit-overflow-scrolling: touch;
}
↑↑のような感じです。
プルダウンメニューの選択時に、自動でコンテンツの拡大をさせない設定例です。
from http://www.bauklotz-studio.com/tips/292/
1 |
<meta name="viewport" content="width=device-width, user-scalable=no" /> |
ラジオボタンのサイズを変えたい時は
width: auto; height: auto;
にしておいて
font-size: 14px;
とフォントのサイズを変えたいサイズに指定するとその大きさになる
checkboxとradioボタンの罫線は
border:1px solid #ccc;
で変更可能
http://sgx2.blog99.fc2.com/blog-entry-21.html
以下引用
フォームを作る際に、ユーザビリティを激的に向上させるひとつに、チェックボックスやラジオボタンと一緒に使うlabelタグがあります。
例えば↓これが普通のチェックボックス
チェックして下さい
これにlabelタグをつけてあげると↓こんな感じ
チェックして下さい
こうすると、「チェックして下さい」をクリックしても、チェックボックスにチェックが入ります。
ただ、iPhoneやiPadに搭載されているブラウザのMobile Safariでは、このラベルタグが使えません。。
使えるようにして欲しいですがしょうがないです。
<script type="text/javascript">
$(function(){
$('form label').click(function(){
$(this)
.children('input[type="radio"]')
.attr('checked','checked');
});
});
</script>
スマホにbox-shadow使うとき
アンドロイドだとかくかくする
.shadow {
-webkit-box-shadow: 0px 2px 2px #cccccc;
}
でshadowをタグのclassに設定してあげるとかくかく解消
なぜ?