CSS メディアクエリのチートシート、モバイルファースト用、スマホ・タブレットのデバイス用のメディアクエリ
WebページでCSSのメディアクエリを使用する際にベースとなるメディアクエリ、モバイルファースト用のメディアクエリ、スマホ・タブレットの主要デバイス用のメディアクエリのチートシートをまとめました。 /*------------------------------------------ Responsive Grid Media Queries - 1280, 1024, 768, 480 1280-1024 - デスクトップ（デフォルトのグリッド） 1024-768 - タブレット横長 768-480 - タブレット縦長 480-less - スマホ --------------------------------------------*/ @media all and (min-width: 1024px) and (max-width: 1280px) { } @media all
iPadのビューポートをパソコンと一緒にする方法 - by Takumi Hirashima
iPadのビューポートをパソコンと一緒にする方法を紹介します。 例えば、スマホとiPadでビューポートの指定を変えたい時に便利な方法です。 iPadの表示をパソコンと一緒にする方法 iPadの横持ちを判別する方法 タブレットの表示をパソコンと一緒にする方法 サイト閲覧時にiPadの表示をパソコンと一緒にする方法を紹介します。 userAgent の分岐を使って、iPadはビューポートの横幅を指定してパソコンの表示を再現します。 次のコードをページの head タグ内に追加してください。 <script> if ((navigator.userAgent.indexOf('iPhone') > 0) || navigator.userAgent.indexOf('iPod') > 0 || navigator.userAgent.indexOf('Android') > 0) { docum
【javaScript】でスクロールを禁止にする（PC、スマホ対応） | とんプログラミング
そこで今回は、スマホでもスクロール（タッチ操作）禁止にする方法を紹介します。 スマホの場合は、cssではなくjavaScriptでの実装が必要です。 以下のソースのno_scroll()を初期化処理などで呼び出せば、PC、スマホでスクロールができなくなります。 スクロール禁止を解除したい場合は「return_scroll()」を呼び出せばOKです。 [index.js] // スクロール禁止 function no_scroll() { // PCでのスクロール禁止 document.addEventListener("mousewheel", scroll_control, { passive: false }); // スマホでのタッチ操作でのスクロール禁止 document.addEventListener("touchmove", scroll_control, { passive
【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ
↓↓↓最新の2021年版を作成しましたのでこちらもご覧ください。↓↓↓ hashimotosan.hatenablog.jp PDFはこちらからどうぞ[508KB] 2019年Pixel 3aやGalaxy S10など一通り新機種が発表されたので、2019年改めてブレイクポイントについて考えてみました（3年ぶり！）。 3年経ってほとんどのサイトがレスポンシブデザインになって、ブレイクポイントを少なく効率よく設定していく方向になっているのだと思います 前回、ブレイクポイントの設定はフレイムワークも参考に考えていましたが、 改めて考えてみると、モバイルファーストの観点からも640px/1024pxではないのではないかと感じました。 以下が3年前の前回の記事です。 いくつかブレイクポイントを調べましたが、 だいたい以下のような分け方が多かったです。 640px/1024px 480px/896x
![【新定番】レスポンシブデザインのブレイクポイントの正解はこれだった[2019最新版] - webのあれこれ](https://cdn-ak-scissors.b.st-hatena.com/image/square/c569bf6868b0e2cd70822921c201208292c30537/height=288;version=1;width=512/https%3A%2F%2Fcdn-ak.f.st-hatena.com%2Fimages%2Ffotolife%2Fh%2Fhashimotoblog%2F20190528%2F20190528165147.png)
ブラウザからデバイスに、OSまで！UA判定に便利なライブラリ「UAParser.js」 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは。フロントエンドエンジニアのつっちーです。 UA判定処理って、自分で書くのは面倒ですよね。条件をそのたび調べたり、微妙に書き間違えて正しく動作しなかったり……。 今回は、そんなUA判定に便利なライブラリ、UAParser.jsについて取り上げたいと思います。 UAParser.jsの特徴 UAParser.jsは、下記のような特徴をそなえたjavascriptライブラリです。 導入方法が豊富 判定可能な要素が多い 簡単に使える まず、導入方法としてはCDNから取得、Node.jsでバンドルなど、さまざまな選択肢があります（今回の記事では一般的な2つの導入方法をご紹介していきます）。 そしてこのUAParser.jsは、ブラウザだけでなく、デバイス情報、OSまで、多くの要素を判定可能です。そう聞くとなんだか処理が面倒くさそう、と思ってしまいますが、使い方はとても簡単です。 参考UR
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
