Upgrade to Pro — share decks privately, control downloads, hide ads and more …

ナウいスマートフォンに対応した
Webサイトデザイン (CAMPHOR- DAY 2021)

ナウいスマートフォンに対応した
Webサイトデザイン (CAMPHOR- DAY 2021)

2021/3/27に開催されたCAMPHOR- DAY 2021での発表資料です
https://camphor.connpass.com/event/206786/

Minoru Takeuchi

March 27, 2021
Tweet

More Decks by Minoru Takeuchi

Other Decks in Programming

Transcript

  1. ͲΒ t d0ra1998ɹ g dora1998 • ژେ޻ֶ෦ిؾిࢠ޻ֶՊ 4ճੜ • WebϑϩϯτΤϯυͱ🍨͕޷͖

    • ڈ೥͸CSSͷ࿩Λ͠·ͨ͠ → • ແྨͷΨδΣοτ޷͖ • ࠷ۙ͏·ͽΐ͍఻આຖ೔ௌ͍ͯΔ
  2. SafariԼ෦ͷσοτκʔϯΛҙࣝ͢Δ • ηʔϑΤϦΞ • ࠷Լ෦ͷφϏήʔγϣϯͱͷׯব๷ࢭ 
 ͷͨΊʹઃ͚ΒΕ͍ͯΔ • 44pxͷσουκʔϯ •

    ΞΫγϣϯόʔ͕ӅΕ͍ͯΔͱ͖ʹ 
 ԡͯ͠΋ClickΠϕϯτ͕ൃՐ͠ͳ͍ cf) https://blog.umeru.ma/post/ios-safaris-action-bar-area-block-tap-event/
  3. Breakpoint͸Ͳ͜ʹஔ͘ʁ ػछ໊ J1IPOFT J1IPOF J1IPOF1SP.BY 8JEUI QY QY QY )FJHIU

    QY QY QY ػछ໊ J1BENJOJ .BD#PPL1SP 
 Πϯν ࢀߟ 8JEUI QY QY )FJHIU QY QY
  4. ػछ໊ J1BENJOJ .BD#PPL1SP 
 Πϯν ࢀߟ (BMBYZ'PME 
 ดͨ࣌͡ (BMBYZ'PME

    ։͍ͨ࣌ 8JEUI QY QY QY QY )FJHIU QY QY QY QY Breakpoint͸Ͳ͜ʹஔ͘ʁ ػछ໊ J1IPOFT J1IPOF J1IPOF1SP.BY 8JEUI QY QY QY )FJHIU QY QY QY https://kakaku.com/keitai/smartphone/model/M0000000722/ ඞͣ͠΋ରԠ͢Δඞཁ͸ͳ͍͕ɺ ಛघ୺຤ͷଘࡏΛ஌Δ͜ͱ͸େ੾
  5. ·ͱΊ • Webͱ͍͑Ͳ΋ɺ୺຤΍OSͷมԽʹ߹Θͤͯ 
 ඞཁͳ࣮૷͸มԽ͢Δ • ։ൃϚγϯͷσϕϩούʔπʔϧͰຬ଍ͤͣʹɺ 
 ੵۃతʹӾཡ୺຤Ͱૢ࡞͔ͯ֬͠ΊΑ͏ •

    ࣮ػ͕ͳ͍৔߹͸ɺΤϛϡϨʔλΛ࢖͏ͷ΋ख • iOS͸MacͷΈ͕ͩɺAndroid͸OSؔ܎ͳ͘࢖͑Δ ࣭໰ɾײ૝͸ɺYouTube ͷίϝϯτཝ or #camphor_day ΁ʂ