タグ

スマホサイトに関するKototy25のブックマーク (4)

  • iPhoneでフォームにforcusしたときズームしないようにする

    iPhoneでフォーム要素にフォーカスすると画面が拡大されるあの効果。 入力時に画面が拡大表示され、入力が終わっても拡大状態がキープされているあの効果。 スマートフォンでパソコン用のウェブサイトを見ているときは、次のフォーム要素を押しやすくていいのですが 「大きい文字」「大きいボタン」のちょうどいいデザインで拡大されると、これが煩わしい! スマートフォン最適化するときは、解除したいところです。 この、フォーカスすると拡大される機能は HTMLのheadで指定するviewportにあるuser-scalableを no(または0)にすると発動しなくなります。 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> user-sca

    iPhoneでフォームにforcusしたときズームしないようにする
  • 拡大縮小もできてiPhoneでフォームにforcusしたときズームしないようにする

    iOSのSafariには、 フォーム要素へフォーカスするとページ全体が拡大され、入力が終わっても拡大されたままという ありがた迷惑な独自仕様があります。 (ダブルタップやピンチインすると元の倍率に戻せますが、毎回なので煩わしい…) 以前、この現象を回避する方法として viewportでページを拡大できないようにして、フォーカス時に拡大しないようにする方法を紹介したのですが ピンチイン(アウト)での拡大縮小は許可したまま iPhoneiPad)でフォームにforcusしたときズームしないようにする方法もありました! サンプル ※iPhoneでひらくと動作を確認できます 入力フォームのfont-sizeが関係していた iOS Safariの初期スタイルで、bodyの文字サイズが16pxになっているからでしょうか inputとtextareaの文字サイズが16px以上なら フォーカス時の自動拡

    拡大縮小もできてiPhoneでフォームにforcusしたときズームしないようにする
  • スマホサイトをデザインするとき参考になるWebサイト6選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作

    こんにちは、デザイナーのモモコです。 スマートフォンの普及率は2021年時点で80%*を超えており(総務省「情報通信白書令和3年度版」)、今やスマートフォンに対応したWebサイト制作は必須と言えます。 そこで今回は、スマートフォンサイトをデザインする際に参考になるギャラリーサイトや、スマートフォンサイトをデザインするときの注意点を紹介します。 海外のトレンドや人気のあるサイトをまとめてチェックできるので、ぜひ最後までご覧ください。 デザインの世界に飛び込んでみませんか? 「プロから学びたい」、「クリエイティブな仕事がしたい」……という方は「スクールでの勉強」もおすすめです。 LIGが運営するWebクリエイタースクール「デジタルハリウッドSTUDIO by LIG」では、未経験から6ヶ月でWebデザイナーを目指せます。現役Webデザイナーによる授業と豊富な就職支援が特徴! ぜひ一度詳細をチェ

    スマホサイトをデザインするとき参考になるWebサイト6選 | 株式会社LIG(リグ)|DX支援・システム開発・Web制作
  • スマホサイトのURLをPCサイトと分ける場合の3つの注意点 - No Web Service No Life

    PC向けのページをスマホに最適化する場合、Googleは以下の3つの方法をサポートしています。 レスポンシブルデザイン(URLとHTMLが一緒) 動的配信(URLは1つだけどHTMLが異なる) URLを分ける 記事では、そのうち、スマホ用に別URLを設ける場合に気をつけるべき事項について書きます。 (他の2パターン、レスポンシブルデザインと動的配信については別途書きます) URLを分けてスマホサイトを用意するとは? URLを分けるとは、以下のようにPCとスマホでそれぞれURLを用意することを指します。 PC:http://www.hoge.com スマホ:http://www.hoge.com/sp UAを判別し、スマホUAからアクセスがあった場合に、スマホ用のURLにリダイレクトする実装が一般的です。この方法の場合、設定にあたって注意すべき点がいくつかあります。 ※Googleはレスポ

    スマホサイトのURLをPCサイトと分ける場合の3つの注意点 - No Web Service No Life
  • 1