タグ

iPhoneとSafariに関するweb_designerのブックマーク (12)

  • そろそろChromeにオサラバ、Safariに戻ったほうがよい理由

    そろそろChromeにオサラバ、Safariに戻ったほうがよい理由2019.03.10 20:00155,423 Adam Clark Estes - Gizmodo US [原文] ( 湯木進悟 ) 時代は繰り返されるのでしょうか? ブラウザといえばIE(Internet Explorer)とキマっていただなんて、もうとっくの昔のようです。世ではChromeがブラウザのスタンダードとして、すっかり定着してきたようなイメージがありますよね。でも、もしかすると、そんな我が世の春を謳歌できるのは、あともう少しだったりするのかもしれません。このほど米Gizmodo編集部のAdam Clark Estes記者は、Chromeを捨てて、Safariユーザーに戻ったことで経験した感動をまとめています。こういう流れが加速していったりするやも…。 ボクの記憶が正しければ、初めてGoogleグーグル)のC

    そろそろChromeにオサラバ、Safariに戻ったほうがよい理由
  • samulife.com - このウェブサイトは販売用です! - samulife リソースおよび情報

    このウェブサイトは販売用です! samulife.com は、あなたがお探しの情報の全ての最新かつ最適なソースです。一般トピックからここから検索できる内容は、samulife.comが全てとなります。あなたがお探しの内容が見つかることを願っています!

    samulife.com - このウェブサイトは販売用です! - samulife リソースおよび情報
  • iPhoneやiPadでページを見ながらウェブデバッグが可能に!iOS 6から搭載された「Webインスペクタ」が超絶便利! | gori.me(ゴリミー)

    【img via iOS 5.1 Update. by MJ/TR (´・ω・)】 iPhoneiPad向けにウェブ制作をしている人は知らないと損! 最近頻繁にgori.meのチューニングを行なっているのだが、iPadで見ると崩れてしまう表示を長らく修正できずにいた。というのも、Macで見るとどのブラウザでも問題なく表示されていたから。 そんなところに先輩が「Safariのウェブインスペクタを使うと良いよ」と。基的にGoogle Chromeで開発をしている僕としては「なぜわざわざSafari?」と思っていたが、iOS 6搭載端末を繋げるだけでSafariのウェブインスペクタはGoogle Chromeの何倍も便利になる。iOS 6からの新しい機能で、iPhoneiPadでページを見ながら直接ウェブデバッグができるのだ!! そもそも「Webインスペクタ」って何? そもそもWebインス

    iPhoneやiPadでページを見ながらウェブデバッグが可能に!iOS 6から搭載された「Webインスペクタ」が超絶便利! | gori.me(ゴリミー)
  • jQueryでMobile Safariの$(window).height()の正しい値を得る方法 - memo.yomukaku.net

    2011-12-19 00:55 jQueryでは$(window).height()でブラウザーの表示可能領域の高さを知ることができます。ところが、iPadiPhoneのMobile Safariがクライアントの場合に$(window).height()で値を得ると、実際よりもかなり小さな値が返ってきます(例えば、来1024pxであるはずの高さが864pxとして得られる等)。 このため、困ったことになります。 例えば、下の図1はjavascriptで作成したpdf viewerです。jquery uiのdialogを使ってブラウザのviewportいっぱいに全画面表示しようとしており、表示可能領域の高さを得るために$(window).height()を実行したところ、864pxという値が返ってきて、その値を使用してビューワーのdialogの高さを設定したために上下に奇妙な空白ができ

  • iPhone, iPadで表示中のウェブページのソース表示ができるブックマークレット -Snoopy

    iPhone, iPad, (iPod Touchも)などのモバイルデバイスで、表示中のウェブページのソースをシンタックスハイライトで表示できるブックマークレットを紹介します。 Snoopy View-source bookmarklet for iPad, iPhone and other mobile devices [ad#ad-2] Snoopyでは、iPhone, iPadなどのモバイルデバイスで表示中のウェブページの情報やソースを表示することができます。 ※キャプチャはiPod Touchです。 ソース表示 ソースはモバイルデバイス用に生成されたソース、元のソース、の2種類が選択できます。 [ad#ad-2] Snoopyの使い方 Mobile Safari -iPhone, iPad, iPodなど 最も簡単な方法は、デスクトップ用のSafariでブックマークレットをドラッグ

    web_designer
    web_designer 2012/03/14
    これは欲しかった機能!
  • iOSシミュレータのSafari向けのFirebugみたいなツール(iWebInspector) | Prototype

    こんなの見つけましたiWebInspector [簡単な使い方] iOSシミュレータを立ち上げる シミュレータ内のSafariで調査したいページを開く iWebInspectorの”Load from Safari”をクリック Page Listingという今見てるページの確認画面が出るので良ければリンクをクリック SafariとかChromeのWebインスペクタに似た画面になるので、色々HTMLとかCSSを調整すると、iOSシミュレータ内のSafariに反映される! 立ち上げるとこんな画面 iOSシミュレータのSafariで適当なページを開く Webインスペクタが表示された! インスペクタでタグを選ぶとシミュレータ内のタグがハイライトされる。 background-colorを変えてみたり、h2タグの中身を変えてみたり 読み込み速度見てみたり ConsoleからJavascript叩いて

  • iPhone、Android ユーザーを虜にするかもしれないブックマークレットにまつわる2つのプロダクトをリリースしました。

    こんにちは。坪内です。 最近、にわかにブックマークレットがブームのような気がしてなりません。昨日もブックマークレットがキャズムを超えた夢を見ました。 先日、AppBank さんが以下のような記事をアップされていましたが、風が吹いた!と感じました。 AppBank :ブラウザ「Safari」の使い方。 Safariを格段に強化する「ブックマークレット」編。 機は熟しました。 フェンリルのブックマークレットプロジェクト、始動です。 さて、先日の記事で、リリースを予告した Tapmarklets が晴れてリリースされました。 iPhoneiPadAndroid のブラウザで利用できるブックマークレットを紹介するサイトで、ひとつひとつのブックマークレットが登録しやすいように、紹介されているのが特徴です。「このブックマークレットを試す」というリンクを押せば、ブックマークレットを登録する前に、どう

    iPhone、Android ユーザーを虜にするかもしれないブックマークレットにまつわる2つのプロダクトをリリースしました。
  • 考察:Appleはスマホサイトを作らない。

    今まで気づかずにいたが、Appleはスマホ(スマートフォン)向けサイトを作っていない。それは何故か。 予算がないとか、(どこぞのメーカーと違って)ウェブデザインや自社製品についての理解度が低いとか、おそらくそういったネガティブな理由ではない。Appleのウェブサイトには、自社のプロダクトデザインに通じる主張が表現されている。 Mobile Safari のUIデザインの質を垣間見るウェブデザイン 自社のプロダクト(ここでは特にMobile Safari)のUIデザインが、何を理想として、どう調整されてきたのか、このサイトのデザインから読み取ることができる。 Appleのウェブサイトの裏側をちょっとだけ覗いてみると、viewport に width=1024 が記述されている。これは、iPhoneの小さな画面でも1024px分の幅があるものと仮想してレンダリングされるようにする、呪文のよう

  • iPhone Safariから画像を投稿する方法

    iPhone Safariから画像を投稿するならMMS連携が便利です。 iScreenShotのように、iPhone Safariから写真や画像を投稿してもらうWebサイトを作る時に悩むのが、どういう方法で画像をWeb側に投稿してもらうかです。 実際に構築するにあたって色々と試してみました。 Safariからファイルアップロード Safariからファイルアップロードで画像を投稿して貰う方法です。 単純に考えればこれですね。開発を始める時は、スマートフォンだしPCと同じ方法で良いよね、と安易に考えていました。 しかし試してみると分かるのですが、iPhone/iPadのSafariでは残念ながらファイルアップロードはできません。 ファイル選択ボタンが無効になってます。。。 メールから送信 次に考えたのが、メール添付による投稿。 mailto:でメールアプリを起動して、画像を添付して貰えれば良い

  • Safariの開発者メニューでスマートフォン開発

    Safariの開発者メニューでスマートフォン開発 AndroidiPhoneのスマートフォンのサイト作成を行う際にSafariの開発者メニューを利用すると便利です。 開発者メニューは環境設定の詳細タブから設定が可能 「メニューバーに"開発"メニューを表示」にチェックを入れることでメニューバーに開発者メニューが追加されます。 開発者メニューではユーザーエージェントの切り替えができるので、ユーザーエージェントで処理を変えている場合もSafariで検証が可能です。 iPhoneやiPod touch、iPadなどだけではなく「その他」から任意のユーザーエージェントも選べます。複雑なユーザーエージェント分岐を行っていなければ「Android」などと入力するだけでAndroid用の処理が実行できます。 また、Webインスペクタを起動することでFirebugに似たデバッグツールが利用できるようになり

    Safariの開発者メニューでスマートフォン開発
  • ウノウラボ by Zynga Japan: iPhone向けのサイトを作るときのちょっとした気配り

    yamaokaです。 だいぶiPhoneAndroidといったスマートフォン向けのwebページを作ることが増えてきたのではないでしょうか。ちょっとした気配りで使いやすくなるケースもあるかなと思うので、いくつか使えそうな工夫について書いてみたいと思います。 ただし、今回はiPhone向けです。 タップされた場所をハイライトする iPhoneのSafariでは「-webkit-tap-highlight-color」という拡張された属性があり、タップされた箇所に色を付けることができます。CSS3ではRGBaによる色指定ができるので、半透明の色を指定すればタップされた箇所をわかりやすく示すことができます。例えば、-webkit-tap-highlight-color:rgba(255,0,0,0.40);と指定すると薄い赤色を付けることができます。「outline:none;」と併せてリンク文

  • [CSS]iPhoneでsubmitボタンのテキストがずれた時の対応方法

    submitボタンのスタイルがiPhone(Mobile Safari)で、テキストがずれたり、「border-radius」の角丸が期待より丸くなってしまった際の対応方法を紹介します。 Styling Submit Buttons for Mobile Safari デモページ キャプチャの元画像:協力(@sparrowSeven) この現象はデスクトップ用のブラウザ(Safari, Firefox)では起きませんでした。また、iPhoneのシミュレーター(iBBDemo2)でも確認できませんでした。iPhone4固有の現象のようです。 原因と思われるのはpaddingの値が正常に適用されていないような感じで、未対応時、対応時のスタイルシートは下記の通りです。 未対応時のスタイル HTML HTMLは非常にシンプルです。

  • 1