webサイトのiPhone X 対応

さくらの夕べ in すごい広島のLTスライド

Transcript

1. ͘͞Βͷ༦΂ in ͍͢͝޿ౡ webαΠτͷiPhone X ରԠ
2. ࣗݾ঺հ
3. Ҫ্ ୓ • ϑϩϯτΤϯυΤϯδχΞ • 1991೥6݄6೔ੜ·Εͷ26ࡀ • ່͔Θ͍͍ • CSS Nite in HIROSHIMA ࣮ߦһձ෭ҕһ௕ • ϑϩϯτΤϯυษڧձ ओ࠵ • [CodeCode](https://codecodeweb.com/) ࣗݾ঺հ
4. ࣗݾ঺հ ݄ Ր ਫ ໦ ۚ ౔ ೔ ன ˕ ˕ ˕ ˕ ˕ ˕ ൩ ˕ ˕ ˕
5. ͘͞Βͷ༦΂ in ͍͢͝޿ౡ ʰोͳ͠୲ʑ໙͓͢͢Ίͷ৯΂ํʱ
11. ༨ന
12. ༨നͷਖ਼ମ • iPhone Xͷૢ࡞ΤϦΞ • ͜ͷΤϦΞʹϘλϯ౳ૢ࡞͢ΔίϯςϯπΛஔ͘΂͖Ͱ͸ͳ͍
13. ରࡦ NFUB
    OBNFWJFXQPSU
    DPOUFOUWJFXQPSUpUDPWFS
17. ରࡦ2 DPOUFOUT\
    
    
    
    QBEEJOHMFGU
    
    ɹQBEEJOHSJHIU
    
    ^
18. ରࡦ3 DPOUFOUT\
    
    
    
    QBEEJOHMFGU
    DPOTUBOU TBGFBSFBJOTFUMFGU 
    
    
    
    QBEEJOHSJHIU
    DPOTUBOU TBGFBSFBJOTFUSJHIU 
    ^
20. ʁ
22. Կ΋มΘͬͯͳ͍
23. The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.
24. The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward. env() ؔ਺͸ɺiOS 11Ͱconstant()ͱ͍͏໊લͰϦϦʔε͞Ε·ͨ͠ɻ Safari Technology Preview 41ͱiOS 11.2ϕʔλ൛͔Βɺconstant() ͸ ࡟আ͞Εɺenv() ʹஔ͖׵͑ΒΕ·ͨ͠ɻ CSSϑΥʔϧόοΫϝΧχ ζϜΛ࢖༻ͯ͠ɺඞཁʹԠͯ྆͡ํͷόʔδϣϯΛαϙʔτͰ͖·͢ ͕ɺࠓޙ͸env() Λ༏ઌ͢Δඞཁ͕͋Γ·͢ɻ
25. The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward. env() ؔ਺͸ɺiOS 11Ͱconstant()ͱ͍͏໊લͰϦϦʔε͞Ε·ͨ͠ɻ Safari Technology Preview 41ͱiOS 11.2ϕʔλ൛͔Βɺconstant() ͸ ࡟আ͞Εɺenv() ʹஔ͖׵͑ΒΕ·ͨ͠ɻ CSSϑΥʔϧόοΫϝΧχζ ϜΛ࢖༻ͯ͠ɺඞཁʹԠͯ྆͡ํͷόʔδϣϯΛαϙʔτͰ͖·͕͢ɺ ࠓޙ͸env() Λ༏ઌ͢Δඞཁ͕͋Γ·͢ɻ
26. The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward. env() ؔ਺͸ɺiOS 11Ͱconstant()ͱ͍͏໊લͰϦϦʔε͞Ε·ͨ͠ɻ Safari Technology Preview 41ͱiOS 11.2ϕʔλ൛͔Βɺconstant() ͸ ࡟আ͞Εɺenv() ʹஔ͖׵͑ΒΕ·ͨ͠ɻ CSSϑΥʔϧόοΫϝΧχζ ϜΛ࢖༻ͯ͠ɺඞཁʹԠͯ྆͡ํͷόʔδϣϯΛαϙʔτͰ͖·͕͢ɺ ࠓޙ͸env() Λ༏ઌ͢Δඞཁ͕͋Γ·͢ɻ
27. ʂ
28. ରࡦ4 DPOUFOUT\
    
    
    
    QBEEJOHMFGU
    FOW TBGFBSFBJOTFUMFGU 
    
    
    
    QBEEJOHMFGU
    DPOTUBOU TBGFBSFBJOTFUMFGU 
    
    
    
    QBEEJOHSJHIU
    FOW TBGFBSFBJOTFUSJHIU 
    
    
    
    QBEEJOHSJHIU
    DPOTUBOU TBGFBSFBJOTFUSJHIU 
    ^
32. ·ͱΊ • viewport-fit=cover • safe-area-inset-top
 safe-area-inset-right
 safe-area-inset-bottom
 safe-area-inset-left • ల։͸env()ͱconstant()
33. ʰމຑ̎ਏ + Թۄ + ωΪ௥Ճʱ
34. ͝੩ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠