タグ: android

カテゴリー
css 開発関連

Androidでのスクロール制御

いつもの100vhおもてたよりおっきい問題を忘れない

シーン遷移がバグってたので自戒のためメモ

シーン遷移が途中で止まっていて、なんでやろーと思って調べたらうっかりjs内でもcss内でも100vhで画面吸着シーン制御してた。
シーンのinnerの内容が画面に内に収まってるのに100vh影響でwindow.heightをdivのclientHeightが超えて、シーン内のコンテンツ溢れててスクロールがあるみたいっすよ？と判定がおかしくなってた。 JavaScriptで画面サイズを取得・変更する方法 | UX MILK
https://uxmilk.jp/28500 スマホで100vhが見切れる問題の解決方法3つ – ゴリラドット
https://gorilla.dododori.com/972/

逆にhtmlにsetした変数–vhの値をトリたければgetPropertyValueする。（今回上フリック時に一瞬iOSでwindow.innerHeightが変わっていたので、–vhをつこた） CSSStyleDeclaration.getPropertyValue() – Web API | MDN
https://developer.mozilla.org/ja/docs/Web/API/CSSStyleDeclaration/getPropertyValue 
//--vh更新タイミングの調整(過去案件より)
//resizeで判定だとファーストビューから移動したときも毎度発動するのでガクガクする→回転もチェック
//orientationchangeで判定だと回転前の数値が取れる＆Androidがおかしい→resizeの中で回転を判定する
window.addEventListener('resize', function() {
    if (Math.abs(window.orientation) !== orientation) {
    fixViewHeightForVideo();
    orientation = Math.abs(window.orientation);
}

あと上フリックがやりづらいとのことだったのでCSSでpull-down-to-refreshを無視させた

How to prevent pull-down-to-refresh in Mobile Chrome? – The Web Dev
https://thewebdev.info/2021/10/09/how-to-prevent-pull-down-to-refresh-in-mobile-chrome/

body だけじゃなくて htmlにもcssかけないと効かないのでお気をつけあれ。 Android の Chrome の Pull To Refresh (画面下方向へスワイプさせ、コンテンツを縦方向にオーバースクロールするとリロードするアレ) を無効化する方法 | かきしちカンパニー Web Magazine
https://www.webmagazine.kakisiti.co.jp/?p=666 overscroll-behavior-y – CSS: カスケーディングスタイルシート | MDN
https://developer.mozilla.org/ja/docs/Web/CSS/overscroll-behavior-y

CSSでスクロールが連鎖するのを回避する古い方法とoverscroll-behaviorを使った新しいテクニック | コリス
https://coliss.com/articles/build-websites/operation/css/prevent-scroll-chaining-overscroll-behavior.html

おまけ

シーンのinnerの内容が画面に内に収まってないときのスクロールしきったかの判定がサンプルコードに。scrollHeightべんり。こういうのあるから画面吸着シーンって嫌い。（しかも負の方向に移動してるときはまた別の判定が必要という・・・）

Element.scrollHeight – Web API | MDN

https://developer.mozilla.org/ja/docs/Web/API/Element/scrollHeight



全然関係ないけど今見たら管理画面では入ってるwp:paragraphがフロントでは消えてる・・・。きっっも。また時間できたら調べよ
カテゴリー
開発関連

Android検証サイト合戦

合戦合戦！！

一日一時間までならただ！
料金プラン｜Scirocco Cloud
http://www.scirocco-cloud.com/ja/price.html

最初の1000時間まではただ！
AWS Device Farm （AWS クラウドで実際のデバイスを使用してアプリをテスト） | AWS
https://aws.amazon.com/jp/device-farm/

カテゴリー
js

android バイブ webサイト（HTML5 Vibration API）

* 今のところAndroidChromeとかだけ。iOS Safari未対応
* Vibration APIはhtml5の勧告に入ったから近い未来ブラウザ側での対応増えんじゃね？

[対応表あり]スマホブラウザでHTML5 Vibration APIを扱う | hi-posi Front-End blog
http://hi-posi.co.jp/tech/?p=150

  var isVibrate = navigator.vibrate || navigator.webkitVibrate || navigator.mozVibrate || navigator.msVibrate;
  if(isVibrate){ navigator.vibrate(500); }

Android地獄再び　〜spacer.gif feat.max-height〜

[2015.7.21追記]
古い機種はやっぱりスペーサー神が必要みたいなのでタイトルかえました☆
[//2015.7.21追記]

バグ集。ググったものメモ。
今回のは(chromeでフォントがおかしい)max-height&viewportの調整でかいけつでした。

Google Chromeだけ、フォントサイズがおかしいんです！そんなトラブルが起きた時に見る、Chromeのフォントサイズのクセまとめ。 | 株式会社 N2P

Google Chromeだけ、フォントサイズがおかしいんです！そんなトラブルが起きた時に見る、Chromeのフォントサイズのクセまとめ。

AndroidのChromeでフォントサイズが大きくなってしまう不具合は「max-height」で解決するかも | SEOモード
http://www.seomode.jp/html-css/2014/06/25/3339/

HTML5/ページ全般/meta要素 表示領域を設定する – TAG index Webサイト
http://www.tagindex.com/html5/page/meta_viewport.html

CSS – 地雷集 – Qiita
http://qiita.com/fnobi/items/ce67c0eeaa2d58733aca#viewport%E3%82%92%E6%8C%87%E5%AE%9A%E3%81%97%E3%81%AA%E3%81%84%E3%81%A8android-chrome%E3%81%A7%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%B5%E3%82%A4%E3%82%BA%E3%81%AA%E3%81%A9%E3%81%AE%E8%A8%88%E7%AE%97%E3%81%8C%E3%81%8A%E3%81%8B%E3%81%97%E3%81%8F%E3%81%AA%E3%82%8B

ホント、爆発すればいいのに。
ちなみに同じようなの人から聞いたことあったけどまったくもって忘れてた。。。
transitionの件もあったし、これからはもっとmax-heightたそと仲良くならなくちゃ！
transition で height を 0 から auto にしたかってん | hirokona

transition で height を 0 から auto にしたかってん

androidのplaceholderがずれる件

うざい。これうざい。

androidのplaceholderがずれる件
http://blog.fukamin.me/?p=338

inputへのline-heightとpaddding指定の違い – jsdo.it – Share JavaScript, HTML5 and CSS
http://jsdo.it/a_t/8Vd2

カテゴリー
js

android2.3対応

ナニが悲しくて。。。
これを
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;

こうやって打ち消す
-webkit-perspective: none;
-webkit-backface-visibility: visible;

[2015.1.20補足]
ううう。
(二日後には何書いてんのかわからんくなってた。補足するとiOS用に入れた上記のおまじない+transform3dのせいで、Android2.3のフォームのフォーカスがあわなくなっていたので、android2系の場合だけ上記を上書きするクラスをつけたのだ)

 if(ua.search(/Android 2.[123]/) != -1) {
		is_oldAndroid = true;

	}

.oldAndroid{
    #container{
        -webkit-transform: translate( 0, 0);
        transform: translate( 0, 0);
        -webkit-perspective: none;
        -webkit-backface-visibility: visible;
        &.opened{
            -webkit-transform: translate( $panelWidth, 0);
            transform: translate( $panelWidth, 0);
        }
    }
}

android2.3 フォーム テキスト 上下に揺れる – Google 検索
https://www.google.co.jp/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=android2.3%20%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A0%20%E3%83%86%E3%82%AD%E3%82%B9%E3%83%88%20%E4%B8%8A%E4%B8%8B%E3%81%AB%E6%8F%BA%E3%82%8C%E3%82%8B

出るわ出るわ。。

Android 2系でテキスト入力時に上下に激しくスクロールされるバグ – Qiita
http://qiita.com/HieroglypH/items/69daba0e33ac61a05953

Androidの標準ブラウザにおいてtranslate3dが引き起こす不具合について | BALLOG
http://blog.bluearrowslab.com/smartphone/topicks/592/

他にもcanvasまわりでバグがある模様

Happy Elements Labs: 世界平和とAndroid
http://blog.happyelements.co.jp/2013/08/love-peace-and-android.html
[2015.1.20補足ここまで]

あとajaxでのキャッシュのアレがナニなのでアレする。
cache : false

Android does not fire AJAX requests because they are cached (on jQuery mobile)
http://www.grobmeier.de/android-does-not-fire-ajax-reqests-because-they-are-caches-ajax-requests-at-least-on-jquery-mobile-10072011.html#.VLx1H2SsXc0

AndroidChromeでアドレスバーを隠すやつやりたい→Fullscreen APIどないよ

アドレスバーを隠すやつ、Chromeではできませんか？ってはなし
↓
＿人人 人人人人人＿
＞　できません！ ＜
￣Y^Y^Y^Y^Y^Y^Y ￣

じゃーフルスクリーンAPIつかてみてやー言われたので実験しました。

■参考URL
Fullscreen API

Fullscreen API

Fullscreen API を簡単に試してみた | WWW WATCH
http://hyper-text.org/archives/2011/11/fullscreen_api.shtml

Android ChromeのURL barは消せないと知った絶望感 « イナヅマTVログ

Android ChromeのURL barは消せないと知った絶望感

■実験結果
１）初期アクセス時からフルスクリーンには出来ないので、
ボタンを押すなどユーザーアクションを促す必要があります。

２）検証した機種では全てでフルスクリーン時にviewportを無視する？、というバグが有り、
常に画面幅を100%として算出された位置にしか表示が出来ないようなので、
一旦組んだもののフッタだけCSS上書きして力尽きました・・・（涙）
設計を変更する場合は全てのページ内要素を％指定で置き換える必要がありそうです。
また、大きめのviewportでつくっているとそもそも画像とかを縮小したりとかいろいろゴニョゴニョです。

３）スクロールが出来ないというバグがある機種もありました。
↓
＿人人 人人人人人人人＿
＞　使いたくないね！ ＜
￣Y^Y^Y^Y^Y^Y^Y ￣

カテゴリー
css

【悲報】spacer.gif 神　降臨　again 【android対応】

[new! こっち↓が最新記事]
Android地獄再び | hirokona

Android地獄再び　〜spacer.gif feat.max-height〜


[/new]

あんどろのテキストエリアが意味もなく理不尽に幅が狭くなる件、
対象の要素（ラッパーの親要素ではダメ。その要素にピンポイントで。）にbackground-colorを設定すればなおる。正し透過はNGなので、神のご登場である。

p,li,dt,dd{
    background: url('../images/spacer.gif') 0 0 no-repeat;
}

わが人生に一点の悔いなし！！！ズゴーーーーン
くっそー！使いたくないぜ！！なんとかしてよドロイダー！

iOS,Android transition チラツキ　対策

iOSなどでアニメーションさせるとチラつく – console.lealog(); : http://lealog.hateblo.jp/entry/2013/02/23/185428

android アプリの自動アップデートのやめかた

検証機で使ってない奴とか電源入れてからしばらくつかえないしアップデート切っておくですよ

GooglePlayのアプリを立ち上げ
↓
メニューの設定
↓
アプリの自動更新

で設定するです。