localhost をスマホ実機で確認する方法 - Qiita
前置き ローカルで WEB の開発中に実機確認したいことってあるじゃないですか。 サーバーにアップすればもちろん見られるんですが、めんどくさいときもある。 そんなときに、localhost で起動中のページに直接アクセスするには以下の手順を踏むことで確認ができます。 localhost をスマホで確認する方法 同じ Wi-Fi に PC / スマホで接続する PC のIPアドレスを確認する（Mac の場合は システム環境設定 => ネットワーク など） localhost を PC で起動 スマホで IP:ポート番号 にアクセス（192.168.1.1:8080 など） 見られる！ 開発者ツールの使い方 端末の種類などによっては多少手順が変わったりするかもしれないのであしからず iPhone Safali のWebインスペクタを使う iPhone - Mac だと、Safali の Web
iPhone Safariブラウザサイズは何px？ viewport width=device-width時
iPhone Safariブラウザサイズは何px？ viewport width=device-width時 108,078views／投稿 2014-09-19／更新 2017-11-13 ［追記］iPhone 8/8 Plus も7も6と同じブラウザサイズ。iPhone Xも幅は375です。この英語サイトがわかりやすいです。 iPhone 6と6 PlusのSafariブラウザ解像度をAppleストアに行って実機で調べて来ました。 iPhone 6 Plus ブラウザサイズ ： 414 × 736 ピクセル 物理的な解像度 ：1,080 × 1,920 ピクセル解像度、401ppi、5.5インチ iPhone 6 ブラウザサイズ ：375 × 667 ピクセル 物理的な解像度 ：750 × 1,334 ピクセル解像度、326ppi、4.7インチ iPhone 5系 ブラウザサイズ ：3
iBeaconとは？ | iBeaconなら「ストアビーコン」
iBeaconとは、iPhoneのiOS7に標準搭載されたことで、いま注目を集めているBluetooth Low Energy（BLE）を使った新技術です。ネットから店舗への誘導などに使える、新しいO2Oの切り札としてマーケッターの期待を集めています。 しかし、新しい技術であるがゆえに、 「いったい何ができるのだろう？」 「そもそも仕組みが分からない」 などなど、様々な疑問を持たれる方が多いのが現状です。 そこで、iBeaconの概要や仕組み、活用法などをまとめてご紹介します。 O2Oマーケティングの切り札！ iBeaconとは何か？ 分かるようで分からないiBeaconの基本 iBeaconは何故注目されているのか？ iBeaconが注目されるきっかけになったのは、エスティモート社（米国）が、2013年9月10日に公開したYouTube動画です。 動画では店舗の前を歩くユーザーのiPho
スマートフォン（iPhone/Android）のページ内振り分け - JavaScriptテックラボ - [SMART]
ページ内でスマートフォンかどうかを判別し、表示を切り替えたい場合のスクリプトを紹介します。 JavaScriptでiPhone、Androidを識別してそれぞれの端末へメッセージを表示には、ユーザエージェントを使います。 navigator.userAgent で取得したユーザエージェント情報から「iPhone」という文字が合った場合の処理をする場合は、 indexOf を使って以下のようにします。 /* iPhoneという文字が見つかった場合 */ if ( navigator.userAgent.indexOf('iPhone') > 0 ){ } indexOf()メソッドは、指定したキーワードの発見位置を返します。発見できなければ-1の数値を返すので、値が0より上であればキーワードが発見できたと分かります。 iPhone/iPad/iPod/Android毎に処理を分けるには次のよ
![スマートフォン（iPhone/Android）のページ内振り分け - JavaScriptテックラボ - [SMART]](https://cdn-ak-scissors.b.st-hatena.com/image/square/efeb6493234f33406d242c048873a805fca99c63/height=288;version=1;width=512/https%3A%2F%2Frfs.jp%2Fwp-content%2Fthemes%2Fsmart%2Fogpimage.png)
【CSS】iPhone 6 / 6 Plusの画面にのみ効かせるスタイルシートの書き方。 – 和洋風KAI
iPhone 6 / 6 Plusにのみ効かせるスタイルシートの書き方。 iPhone 6の画面サイズは375x667、iPhone 6 Plusは414x736というサイズになっていますので、この横幅サイズをフックにしてスタイルシートをかければよいわけです。 testというクラスのimgタグにスタイルシートをかける場合、このように書いたら無事適用させることができました。↓↓ @media(min-width: 375px) { .test img { width: 170px; }} @media(min-width: 414px) { .test img { width: 180px; }} うーん。@mediaはやっぱり便利・・・！ あとがき @isloopをフォローする 本当は、iPhone 6 / 6 Plus限定という書き方ではなく、あらゆる画面に反応できるスタイルシートを書く
スマートフォン・タブレット・PCの場合の条件分岐(JavaScript)
例えばスマートフォンでアクセスした時に、スマートフォン用のアドレスに飛ばすなどユーザーエージェントで判別して処理を変える方法のメモです。 ▼スマホ（iPhone,iPod touch,Android）の場合の条件分岐 if ((navigator.userAgent.indexOf('iPhone') > 0 && navigator.userAgent.indexOf('iPad') == -1) || navigator.userAgent.indexOf('iPod') > 0 || (navigator.userAgent.indexOf('Android') > 0 && navigator.userAgent.indexOf('Mobile') > 0)) { //スマホ（iPhone,iPod touch,Android）の場合 alert('おっす、スマホちゃん！'); }
これがスマートフォン向けサイトを作るときの viewport 設定３パターンだ
スマートフォン向けの Web サイトを作るとき、viewport の設定次第で使い勝手が大幅に変わる。 最近はレスポンシブ Web デザインが流行してるけども、その大前提として viewport の設定パターンを抑えておくのは重要だろう。 この記事では、viewport の設定によって、見た目・使い勝手がどう変わるかを解説する。 パターン1: 何も考えずに HTML を書く まずは、viewport を指定せずに、単純な HTML をスマートフォンで表示してみる。 <!DOCTYPE html> <head> <meta charset="utf-8"> </head> <body> <img src="/images/logo-ja.png"> <p>色んな素材がごった煮になった様子をお椀で表現しています。 湯気が<strong>「てっく」</strong>に見えるのが隠し味になっていま
[スマホ（iPhone）で、文字や画像のコピペを禁止する方法] by シロのITメモ
いつも混乱するので、軽くまとめてみた。 スマホ（iPhone）で文字や画像のコピペを禁止する方法、と言ってしまうと何だが、 そのような理由からでなくても、ユーザービリティが不便にならない範囲において、 不用意に出てしまうダイアログを抑制したいという場合もある。 また、スマホでアプリを作る場合などでもそうだ。 まず、テキスト部分などを長押ししている時に出てくる「COPY」ダイアログの抑制方法。（画像1） これは、以下のCSSで解決。 *:not(input):not(textarea):not(select), input[type=image], input[type=file], input[type=submit], input[type=button], input[type=reset] { -webkit-user-select: none; } 画像1 注意されたいのは、テキス
切り抜きジャック
GW中は家族サービスの傍ら、ずっとブログのことを考えていたのでした。 はじめはいつかやろうと思っていたサーバー移転を考えていたわけです。 すると考え出したら出てくるわ出てくるわ、色んな気になることが…。 で、色々考えた末 […]
【Webアプリ】iPhone4 で画像をきれいに表示する色々な方法【試行錯誤編】
iPhone4 がついに届いて興奮気味のgunjiです。 2週間待ちでした！ 待ってる間に、iPhone4も対象としたWEBアプリ（ネイティブアプリのweb view を含む） のコーディングで気をつけることについておさらいしていたところ、 Retinaディスプレイに画像を最適化させるのって意外とめんどいよね！ という現実に打ちのめされたので、まとめてみます。 そもそもRetinaディスプレイってなんでしたっけ？ はいはい、iPhone4の目玉のひとつで、今までの2倍の解像度で 画面がとってもキレイに見えるんですよね！ 拡大しなくても小さな文字が読めるなんてサイコー！ ところが、今までiPhone向けに作ったサイトをこのiPhone4で見るとちょっと 不思議な状態になってることがあるのです。 iPhone4で見たらなんか画像がにじんでるように見える・・・？！ こういうイメージです。 そう、
Jquery Mobile 即効iphoneサイト
新しいスマートフォン サイト作成のフレームワークが出たということで、早速試してみました。 その名もJquery Mobile。 特徴は 以前 jqtouchというものを使ってiphone版サイトの作成を試みた時は、動きが硬い、使いづらい、カスタマイズし難いなど問題があり、Senchaというフレームワークを使ってみようとSenchaの勉強を始めたところだったのですが、Javascriptの知識が豊富にないとやはりカスタマイズに難ありでした。 その点、このJquery MobileはHTMLの知識だけでiphoneサイトが作れてしまうという優れものです！ ファイルの読み込みは３つだけ。 <link rel="stylesheet" href="./js/jquery.mobile-1.0a3.min.css" /> <script src="./js/jquery-1.5.min.js"></
スマートフォンサイト用に、フリック・スワイプ対応が簡単に出来るjQueryプラグインいろいろ | Web活メモ帳
最近スマートフォン対応やタブレット対応の案件が増えてきて、スワイプに対応させたいと言われる事が結構多いです。 知ってる人も居るかもしれませんが、スワイプが出来るようになるjQueryプラグインをまとめてみました。 画像ギャラリー専用のものから、ページ全体をスワイプで区切るものまで色々ありますよ。 参考になれば幸いです。 jQuery Touchwipe iPhone、iPad、Android用にスワイプでスライドショーを移動できます。 スワイプした時のイベントが簡単に取得できるので、画像切替意外にも色々使えそう。 PCの場合には、アンカーテキストで画像の切替ができます。 サイズも1kB程度なので、モバイル端末に優しいですね。 PhotoSwipe jQuery Mobile対応の全画面イメージギャラリー。 写真を大きく表示させて、ツールバーで操作するタイプです。 jquery.flicks
jQuery.flickSimple.js
※アイコンはNIXUS Icon Packを使わせていただきました。 特徴 iPhoneの特徴的なインタフェースであるフリック操作を、Webサイト上で実現するための jQueryプラグインです。 同じような動作をするプラグインは他にもありますが、このプラグインについては以下のような目的のもとに作りました。 フリック動作のみを実装する 見た目に関連する部分は、なるべく自由にできるようにする その代わりに、拡張しやすいようにする 内部のパラメータに簡単にアクセスできるようにする コールバック関数を用意する iPhone、Androidだけでなく、PCのブラウザ上でも動作させたい IE6でも動いた iPhone、Safari等、CSSアニメーションが使えるものは使う iPhone、Androidの縦持ち・横持ちに対応する 子要素の中にアンカーや画像があっても大丈夫 Macの場合、画像がドラッグさ
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
東京のアプリデザイン・UIデザイン制作会社｜株式会社ハラハラ｜harahara Inc.
GoogleChromeでJavaScript動かない。httpsが原因？？
http://www.webcreatornote.com/2012/02/%E3%82%B9%E3%83%9E%E3%83%BC%E3%83%88%E3%83%95%E3%82%A9%E3%83%B3%E7%94%A8%E3%82%B5%E3%82%A4%E3%83%88%E3%81%A7%E9%9B%BB%E8%A9%B1%E7%99%BA%E4%BF%A1%E6%A9%9F%E8%83%BD%E3%82%92%E6%89%8B%E5%8B%95%E3%81%A7/
イオンSIM、イオンのスマホ、スマホの月額料金を格安に。音声通話も可能 | b-mobile SIM
SIMフリーのスマートフォン、タブレット、アップル製品 - EXPANSYS 日本
html5-css3.jp - このウェブサイトは販売用です！ - スマートフォン 編集者 方法 サイズ 日本 ツール ブラウザ テスト リソースおよび情報