iOSでも100vhをいい具合に調整して画面の高さいっぱいに要素を表示させる
TAK(@tak_dcxi)です。今回もCSSに関する投稿です。 以前このようなツイートをしました。 メインビジュアルなど、画面いっぱいに要素を表示するためにheightやmin-heightに100vhを指定する。そして、iOSで表示確認した時に以下のような問題が起こるわけです…。 iOSのSafariでの100vhが気に食わない問題 iOSのSafariでは100vhの計算にアドレスバーが考慮されていないため、アドレスバー分押し出されて格好悪く表示されます。ちなみにiOSのGoogle Chromeは中身SafariなのであれもSafariです。 この問題に立ち向かうために、実装者はJavaScriptを利用して高さを指定したり、height: 100%;のバケツリレーを行ってアドレスバーまで考慮した画面いっぱいの表示を実現するために頑張ってきたわけです。 そんな中、先程のツイートから
jQueryでスマホのスクロールイベントを無効化する - Qiita
// スクロール禁止 $(window).on('touchmove.noScroll', e => { e.preventDefault(); }); // スクロール禁止 解除 $(window).off('.noScroll'); const $window = $(window); const $menu = $('.menu'); const $menuBtn = $('.menu-btn'); let openFlag = false; $menuBtn.on('click', () => { if (!openFlag) { // スクロール禁止 $window.on('touchmove.noScroll', e => { e.preventDefault(); }); // メニューを表示 $menu.fadeIn(() => { openFlag = true; });
digitalskill.jp
Buy this domain. digitalskill.jp 2021 Copyright. All Rights Reserved. The Sponsored Listings displayed above are served automatically by a third party. Neither the service provider nor the domain owner maintain any relationship with the advertisers. In case of trademark issues please contact the domain owner directly (contact information can be found in whois). Privacy Policy
スマホサイトで使えるコピペTips集(Javascript / CSS3 / HTML5) | hi-posi Front-End blog
※ほぼ備忘メモで説明をかなり省いているので、ある程度制作知識のある方向けのエントリーです。 ※JavascriptはjQueryを使う場合が多いので読み込んでいる前提です。 目次 振り分け系 ユーザーエージェントを判別する ページを横幅320pxに合わせて拡大(zoom)する 画面の回転（Landscape-Portrait）イベントを取得する 現在Landscapeモードか、Portraitモードかを調べる スクロール制御系 タップするとページの一番上にスクロールで戻る タップすると指定したidの位置までスクロールで戻る タップすると指定した位置までスクロール無しで戻る iPhoneのSafari(iOS7含む)でスクロールを禁止する タッチ制御系 タッチ開始を検知する タッチ中を検知する タッチの終わりを検知する フォーム制御系 フォームのラベルのタップを有効にする フォームのペース
最近のoverflow: scroll事情 - console.lealog();
もちろんモバイル情報です。 iOS4やらAndroid2.x時代にはまったく使い物にならなかったこの指定、 最近はどうなの？っていう。 overflow: scroll 対象をiOS5以上、Android4以上とするのであれば十分に使えるものだと思います。 ただスクロールすれば良いだけであれば、jsなしに実現できる時代きた！すばらC！ -webkit-overflow-scrolling: touch 勘の良い人ならお気づきでしょうが、コレも使いたいですよね。 スクロールできる部分で慣性スクロールができるようになるやつです。 .carousel { overflow: scroll; -webkit-overflow-scrolling: touch; } みたいな。 ただこいつは、まだ要注意です・・。 手元で再現したバグなので、すべてのケースに当てはまるわけではないと思いますが、 一応こ
1から始めるSwift言語。SwiftでiPhoneApp製作 その1
いい加減、ネイティヴ iPhoneAppの製作を行おうかと思います。 と言うのも、以前、iPhoneやらAndroidやら途中まで作成してはやめ、また始めなんてやっていましたらもう2016年。。 JavaやらC++やらswiftやらRubyやらと浅く広くやっていますと、「あれ。これどうだったけ？」「AutoLayoutってなんだっけ」状態が多々発生しますね（大袈裟に言いましたが） w と言うことで、やったことを忘れないように（これは歳か？w） しっかりSwiftと向き合って1からiPhone Appを作って行ければと思います！！ Swift GitHub 特にSwiftで書いてiPhoneAppをリリースした。って経験もないど素人レベルなので、 「これからiPhoneAppを作るぞ！」て方に参考になればと思います！ 何はともあれ、iPhoneApp作成に必要なのはPCはMacとなります。
【Xcodeとは？】Xcodeの使い方、Swiftから始めるアプリ開発の基礎を初心者向けに解説 - エンジニアtype | 転職type
iOS、Android、Unityなどのアプリ開発について、初心者向けの内容を『RainbowApps』講師陣が分かりやすく解説していきます。 第1回ではアプリ開発に必要なSwiftという新しいプログラミング言語の紹介をしました。今回はiOSアプリ開発に必須のツールであるXcodeの使い方を紹介しながら、実際にアプリを起動させるまでを行います。 Xcodeの最新バージョンであるXcode6のインストールがまだの方は、第1回の記事を参照してインストールしておいてください。 【1】Xcodeとはなんぞや？ アプリの開発は、プログラムを書くだけではできません。アプリをiPhone上で動作させるには、プログラムをコンピュータが理解できる形式に変換する必要があります。 それだけでなく、アプリが使う画像や音声素材の管理、アプリが想定通りに動作するかの確認や、バグがないかの検証など、さまざまなことが必要
GitHub - benmajor/jQuery-Touch-Events: A collection of mobile event plugins for jQuery.
After almost 2 years in public beta, I am pleased to announce that the library is now officially launched as version 1.0.0. I'll be updating the version history over time with digests of fixes, features and improvements: Version 2.0.3 (2020-04-23) Fix for bug #165 Version 2.0.2 (2020-04-21) Fix for binding events to document and window. Update NPM repo so that latest releases are detected. Version
[iOS] iOS エンジニア以外でもリリースできる！iOS アプリのリリース手順のまとめ [2015年11月版] | DevelopersIO
はじめに こんにちは、モバイルアプリサービス部の荒川です。 最近は、お客様の端末でソースコードをダウンロードして、アプリをリリースして頂く機会が増えてきました。iOS アプリのリリースは Android と比較すると非常に煩雑です。 Apple の開発者用アカウント管理や設定、Xcode でのリリース用バイナリの書き出しは、慣れている方でも（公式のUIがたまに変わるので）すぐにできるとは限りません。セキュリティを考慮すると、自社以外の関係者にリリースをお願いすることは、好ましくありません。NDAを締結しても、事故が起きるリスクがあります。 この記事では、上記の問題を解決するために、iOS 開発者以外の方でも Xcode から App Store へリリースできる手順を紹介します。 対象読者としては、 初めて App Store へバイナリを提出する方 リリース担当者から引き継ぎをお願いされ
![[iOS] iOS エンジニア以外でもリリースできる！iOS アプリのリリース手順のまとめ [2015年11月版] | DevelopersIO](https://cdn-ak-scissors.b.st-hatena.com/image/square/70be6be4a1b16ae320da190065d24a53f9ea89d0/height=288;version=1;width=512/https%3A%2F%2Fdevio2023-media.developers.io%2Fwp-content%2Fuploads%2F2014%2F08%2Fapp_store.png)
WebエンジニアのためのSwift言語入門 - ICS MEDIA
Mac、iPhone・iPad、そしてApple Watch。これらのApple製品上で動くアプリはObjective-CとSwiftという言語で開発できます。Swiftは2014年に発表され、他のプログラミング言語の長所を多く取り入れたプログラミング言語です。何かしらのプログラミングの経験がある開発者にはもちろん、これからプログラミングを始める人にも比較的学習しやすいものとなっています。今回はiOSアプリにおけるパーティクル表現を通して、ActionScript 3.0やJavaScriptのようなウェブ開発技術と比較しながらSwiftを始めてみましょう。 デモについて Swiftで作られたパーティクルアニメーションをiPhone 6 Plus上で動かすデモです。画面上でフリックした場所にパーティクルが発生し、時間の経過とともに色が変わっていきます。 ソースコードはGitHubで公開して
Seite nicht korrekt eingerichtet
Zugriff nicht möglich Dies ist ein Server von manitu. Bitte verwenden Sie zum Aufrufen von Webseiten nur den jeweiligen Domainnamen (z.B. www.manitu.de) und keine IP-Adressen (z.B. 1.2.3.4). Sollten Sie von einer anderen Seite durch einen Link hierher gelangt sein, so informieren Sie bitte den Betreiber der jeweiligen Webseite. Sind Sie der Domain-Inhaber? Dann schauen Sie in unsere FAQ. This site
iOS 9, Safari and the Web－firt.dev
3D Touch, new Responsive Web Design, Native integration and HTML5 APIs by Maximiliano Firtman Twitter @firt About Newsletter Published 9 years ago (16 Sep 2015) About 12 min reading time #ios #safari #macos I can’t believe it’s been a year since my last post in this blog; in the meantime, I’ve written articles at different magazines, while working on a new book and delivering several trainings aro
タッチ操作に対応した画像ビューワーをJavaScriptで作るならD3.jsが便利
スマホやタブレットで写真を表示していると、ピンチでズームしたり、ドラッグで移動したりができて便利なので、あれを Web 上で実現してみたくなった。 最近のブラウザーでは touchstart や touchmove イベントでタッチ情報を取れたり、イベントの touches でマルチタッチを扱えたりするので、実現するための基盤はそろっている。 適当なライブラリーがあるかと思って探してみたが、意外と苦労してしまった。 Hammer.js が使えない タッチを扱うためのライブラリーとしては Hammer.js がメジャーらしい。スワイプ・ピンチ・ドラッグなど、各種イベントにも対応していて、これを使えば一発解決してくれそうだ。 ところが、画像ビューワーを作るには不向きだった。困ったのは次の 2 点。 ピンチやドラッグは個別には動くが、組み合わせたときに「表示位置」と「倍率」の関係を自前で計算する
[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js
マークアップは非常にシンプル、スクリプトの設置も簡単、スマホでもタブレットでもデスクトップでもすいすい快適に操作できる水平スクロールコンテンツを実装できるjQueryのプラグインを紹介します。 デモのアニメーション horizonScroll.jsの使い方 Step 1: 外部ファイル 当スクリプトとjquery.jsを外部ファイルとして記述します。 <head> ... <script type="text/javascript" src="jquery-1.10.2.js"></script> <script type="text/javascript" src="jquery.horizonScroll.js"></script> </head> スマホなどタッチデバイス対応にする場合は、touchSwipe.jsも加えます。 <head> ... <script type="tex
![[JS]スマホでもデスクトップでも快適！水平スクロールコンテンツを簡単に実装できるスクリプト -horizonScroll.js](https://cdn-ak-scissors.b.st-hatena.com/image/square/87c79333735eb75d10033e33d194426b66f5def3/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-201501%2F2015031609.png)
CSSだけでお手軽なフリック&ドラッグスライダーを作る | バシャログ。
今年のベスト映画はやっぱりガーディアン・オブ・ギャラクシーなminamiです。 左右にスクロールするスライダーのようなUIを作る機会は未だ多いですが、今回は主にタッチデバイスで便利なフリック&ドラッグで動くスライダーをCSSだけで作ります。 Amazonのスマートフォンサイトなどでも同じように実装されています。 作り方 PC用のブラウザではoverflow: autoやscroll を設定した要素の中にそれよりも大きな要素が含まれる場合、スクロールバーを表示させてスクロールすることができますが、iOSやAndroidなどのスマートフォン用のブラウザではうまくスライドしなかったり、スライドそのものができなかったりします。 今回ご紹介する方法だとCSSだけで慣性スクロールをつけることができます。 HTMLのマークアップは下記のようにしました。 <div class="slider-wrappe
[CSS]iOS で滑らかなスクロールを実現する「-webkit-overflow-scrolling」プロパティの使い方｜CSSスニペット｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」
overflow で要素内をスクロールさせると、iPhone やiPad などのiOS で見た場合にスクロールがぎこちなくなります。 そんな時は、iOS 5.0 より実装されたSafari CSS の -webkit-overflow-scrolling プロパティを使うことで、iOS でもスムーズなスクロール（慣性スクロール）を実現できるようになります。 -webkit-overflow-scrolling の指定 -webkit-overflow-scrolling に指定する値は「auto」と「touch」の2 つです。 「auto」はデフォルトで、慣性スクロールしません。 指定した高さの要素内をoverflow: scroll でスクロールさせる際に、以下のように .content { height: 200px; overflow: scroll; -webkit-overflo
![[CSS]iOS で滑らかなスクロールを実現する「-webkit-overflow-scrolling」プロパティの使い方｜CSSスニペット｜WEBデザインの小ネタとTIPSのまとめサイト「ウェブアンテナ」](https://cdn-ak-scissors.b.st-hatena.com/image/square/08b792dc919b5df541e06c5e157286ce8e586603/height=288;version=1;width=512/https%3A%2F%2Fwww.webantena.net%2Fwp-content%2Fuploads%2F2014%2F02%2Fios.png)
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Monaca LocalkitとGitでローカル開発をはじめてみよう
GitHub - IjzerenHein/autolayout.js: Apple's Auto Layout and Visual Format Language for javascript (using cassowary constraints)
Payforward
GitHub - cjwirth/awesome-ios-ui: A curated list of awesome iOS UI/UX libraries
