スマホWebサイト/ハイブリッドアプリ開発を高速化するJavaScriptフレームワークまとめ | BACKEND AS A SERVICE mbaas BLOG
デスクトップ向けのWebサイト開発ではjQuery/Backbone.js/AngularJS/Ember.jsなどを採用するケースが多いのかなと思います。しかしスマートフォン、タブレット向けのWebサイトとなるとまた勝手が違います。特にUI周りの取り回しであったり、タッチ/マルチタッチイベント、スマートフォン特有のAPIなどを適切に扱えなければなりません。何よりハードウェアの性能がデスクトップより低いので高速にストレスなく動作させるためには軽量でなければなりません。そこで今回はスマートフォン、タブレット向けのWebサイトを構築したり、HTML5によるハイブリッドアプリを開発するのに使えるJavaScriptフレームワークを紹介します。ぜひ皆さんの開発に役立ててください。mBaaSお役立ちブログ トップ> ブログ> Tips> スマホWebサイト/ハイブリッドアプリ開発を高速化するJava
AndroidのOSのバージョンを取得 - jsdo.it - Share JavaScript, HTML5 and CSS
var ua = navigator.userAgent; var result = document.getElementById('result'); result.innerHTML = ua + "<br>"; if( ua.search(/Android 2.1/) != -1 ) { result.innerHTML += "Android 2.1"; } else if( ua.search(/Android 2.2/) != -1 ){ result.innerHTML += "Android 2.2"; } else if( ua.search(/Android 2.3/) != -1 ){ result.innerHTML += "Android 2.3"; } if( ua.search(/Android/) != -1 ){ result.innerHTML +=
Android/iPhoneのURLバーを隠す - tweeeetyのぶろぐ的めも
Webベースでのスマホアプリの開発をお勉強中、しょっぱなからいきなり躓いたのでメモ。 WEBの『アプリ』を作る勉強ということでURLバーはぜひ隠したいですが、下記のようなサンプルが結構あります。 <body onload="window.scrollTo(0,1);"> AVDMangerで確認したところ難なく成功。 が、しかしiPhoneで見たら動いてくれない。。。(iPhoneだからではないと思います) 試行錯誤したわけではないですがｗ、いくつか調べたらonload時にscrollToするだけではﾀｲﾐﾝｸﾞが早すぎて動かないらしい。そういう意味だとiPhoneが優秀なのかも。 なので、下記のようにsetTimeoutを使ってﾀｲﾐﾝｸﾞをわざと遅めにすると動くらしいです。というかiPhoneで確認してもOKでした。 <head> <script type="text/javascri
iPhone,Android両対応スマホ画面回転のjavascriptイベントは orientationchange resize
iPhone,Android両対応スマホ画面回転のjavascriptイベントは orientationchange resize 回転イベントorientationchange 画面が回転したときに何かさせたいときはorientationchangeで設定できます。 ※Androidは2.2から対応しました。2.1の端末では動きません。 $(window).on(“orientationchange”,function(){ alert("画面が回転しました"); // ここに実行したい処理を書く }); 回転したときだけ実行する場合は、これでいけますが ページ読み込み直後にも処理を実行したい場合だったら、 resizeもセットで設定します。 $(window).on(“orientationchange resize”,function(){ alert("この端末の横幅は"+wind
iPhone と Android の onOrientationChange タイミングの違い - makogの日記
またスマートフォン対応サイトネタ、Androidネタです。 Androidのブラウザにて。Android 2.2から、iPhoneと同じように縦持ち・横持ちが変わった際に発生するイベント「window.onorientationchange」が使えるようになっているようです。ですが、このイベントが起きるタイミングがiPhoneとAndroidで異なっているようです。 var $win = $(window); var debug = $('#debug'); $win.bind( 'orientationchange', function() { debug.html( debug.html() + 'orient:' + $win.width() + ', ' ); } ) .bind( 'resize', function(){ debug.html( debug.html() + '
モバイル端末のブラウザ画面サイズとMedia Queries
Androidの画面サイズがピンキリ過ぎてｶｯとなったので真面目に調べてみた。 調べついでにメディアクエリーも書いてみた。 下に調べた各端末のサイズを表で晒してるんですけど、 端末サイズが小さくてもブラウザで拾えるwindow.innerサイズは大きいので AndroidスマホのFWVGA以下とqHD〜HD、iPhone、iPhone5、タブレット という具合にざっくりグループ分けできるようでした。 landscapeは単純に値が逆になるのかというとそうではなく、 特にiPhoneの場合にはメニューバーのサイズが変わるのでheightが微妙に変わります。 アスペクト比がはiPhoneが3:2でAndroid端末は16:9、 タブレット端末の場合はiPadは4:3でAndroid端末は16:10 viewport で width=device-width,initial-scale=1,ma
[JavaScript] iPhone4Sなどスマホの画面サイズを正しく取得する方法
iPhone4など、スマートフォンの一部では、JavaScriptで画面サイズを取得する際にちょっとしたコツが必要です。 詳細は以下から。 JavaScriptでスマホの画面サイズを取得する方法 通常、JavaScriptで画面サイズを取得する際は『screen.width』で横幅を、『screen.height』で縦幅を取得する事ができます。 <script type="text/javascript"> width_num = screen.width; height_num = screen.height; </script> iPhone4やiPhone4Sの画面サイズは横640px・縦960pxですが、旧機種の3Gや3GSとの兼ね合いからか、screen.widthの値が320、screen.heightの値が480になってしまいます。 この問題を解決するには『window.de
![[JavaScript] iPhone4Sなどスマホの画面サイズを正しく取得する方法](https://cdn-ak-scissors.b.st-hatena.com/image/square/7c8325d6196ae2d46e68bc63e968a5b7d5e414ce/backend=imagemagick;height=288;version=1;width=512/https%3A%2F%2Fblog.diginnovation.com%2Fwp-content%2Fuploads%2F2012%2F09%2Fjavascript_devicePixel-300x225-1.jpg){kind=tracking}
スマートフォン対応でよく使うhtml、css、javascriptのまとめ
スマートフォン(ios、android)向けのウェブサイト・ウェブアプリを作る際に個人的によく使うhtml、css、javascriptの備忘録。 html関連 headタグ内での設定<!-- //デバイスサイズにあわせて表示領域を変更する --> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- //電話番号のリンクを無効化 --> <meta name="format-detection" content="telephone=no"> <!-- //ホーム画面用アイコン --> <link rel="apple-touch-icon" href="icon.png"> <!-- //ホーム画面用アイコンの光沢を無効化する --> <link rel="apple-touch-icon
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
abars.biz
window.innerWidth - ウィンドウ内側の幅を得る - JavaScriptリファレンス