Submit Search
Upload
Viewportのお話
•
Download as PPT, PDF
•
0 likes
•
1,482 views
寛之 横嶋
Follow
SmartPhone用viewを変化させる 魔法のmetaタグ
Read less
Read more
Technology
Report
Share
Report
Share
1 of 5
Download now
Recommended
リクノート 資料 2012.8.1
リクノート 資料 2012.8.1
co_rrdd
マックのススメ
マックのススメ
YanoLabLT
GNUのお話
GNUのお話
寛之 横嶋
macbookについてみんなが誤解していること
macbookについてみんなが誤解していること
Tomohiro MITSUMUNE
GPL And SIer
GPL And SIer
Koichi TAKAGI
アフリカビジネス入門
アフリカビジネス入門
YOICHIRO SHIBA
20081220 Lt
20081220 Lt
id774
研究者のための視覚コミュニケーション「タイポグラフィ」編 Visual Communication for Researchers: Typography
研究者のための視覚コミュニケーション「タイポグラフィ」編 Visual Communication for Researchers: Typography
Niiyama Ryuma
Recommended
リクノート 資料 2012.8.1
リクノート 資料 2012.8.1
co_rrdd
マックのススメ
マックのススメ
YanoLabLT
GNUのお話
GNUのお話
寛之 横嶋
macbookについてみんなが誤解していること
macbookについてみんなが誤解していること
Tomohiro MITSUMUNE
GPL And SIer
GPL And SIer
Koichi TAKAGI
アフリカビジネス入門
アフリカビジネス入門
YOICHIRO SHIBA
20081220 Lt
20081220 Lt
id774
研究者のための視覚コミュニケーション「タイポグラフィ」編 Visual Communication for Researchers: Typography
研究者のための視覚コミュニケーション「タイポグラフィ」編 Visual Communication for Researchers: Typography
Niiyama Ryuma
【アシアル塾】Linux超入門編・第一回はじめてのターミナル(黒い画面)操作
【アシアル塾】Linux超入門編・第一回はじめてのターミナル(黒い画面)操作
アシアル株式会社
Bazaar
Bazaar
KLab株式会社
EC2上でパケットをミラーリング
EC2上でパケットをミラーリング
Kenta Yasukawa
APACHE HTTP SERVER
APACHE HTTP SERVER
寛之 横嶋
Introducing Apple MacBook Pro 2016
Introducing Apple MacBook Pro 2016
JJ Wu
0章 Linuxカーネルを読む前に最低限知っておくべきこと
0章 Linuxカーネルを読む前に最低限知っておくべきこと
mao999
Backand Presentation
Backand Presentation
Backand Cohen
とある診断員とSQLインジェクション
とある診断員とSQLインジェクション
zaki4649
Linuxカーネル超入門
Linuxカーネル超入門
Takashi Masuda
Hong Kong Travel Guide
Hong Kong Travel Guide
via.com
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
More Related Content
Viewers also liked
【アシアル塾】Linux超入門編・第一回はじめてのターミナル(黒い画面)操作
【アシアル塾】Linux超入門編・第一回はじめてのターミナル(黒い画面)操作
アシアル株式会社
Bazaar
Bazaar
KLab株式会社
EC2上でパケットをミラーリング
EC2上でパケットをミラーリング
Kenta Yasukawa
APACHE HTTP SERVER
APACHE HTTP SERVER
寛之 横嶋
Introducing Apple MacBook Pro 2016
Introducing Apple MacBook Pro 2016
JJ Wu
0章 Linuxカーネルを読む前に最低限知っておくべきこと
0章 Linuxカーネルを読む前に最低限知っておくべきこと
mao999
Backand Presentation
Backand Presentation
Backand Cohen
とある診断員とSQLインジェクション
とある診断員とSQLインジェクション
zaki4649
Linuxカーネル超入門
Linuxカーネル超入門
Takashi Masuda
Hong Kong Travel Guide
Hong Kong Travel Guide
via.com
Viewers also liked
(10)
【アシアル塾】Linux超入門編・第一回はじめてのターミナル(黒い画面)操作
【アシアル塾】Linux超入門編・第一回はじめてのターミナル(黒い画面)操作
Bazaar
Bazaar
EC2上でパケットをミラーリング
EC2上でパケットをミラーリング
APACHE HTTP SERVER
APACHE HTTP SERVER
Introducing Apple MacBook Pro 2016
Introducing Apple MacBook Pro 2016
0章 Linuxカーネルを読む前に最低限知っておくべきこと
0章 Linuxカーネルを読む前に最低限知っておくべきこと
Backand Presentation
Backand Presentation
とある診断員とSQLインジェクション
とある診断員とSQLインジェクション
Linuxカーネル超入門
Linuxカーネル超入門
Hong Kong Travel Guide
Hong Kong Travel Guide
Recently uploaded
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
CRI Japan, Inc.
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
atsushi061452
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Toru Tamaki
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Hiroshi Tomioka
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NTT DATA Technology & Innovation
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
Hiroshi Tomioka
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
Toru Tamaki
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
CRI Japan, Inc.
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
iPride Co., Ltd.
Recently uploaded
(11)
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
LoRaWANスマート距離検出センサー DS20L カタログ LiDARデバイス
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介: The Surprising Effectiveness of PPO in Cooperative Multi-Agent Games
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
論文紹介:Selective Structured State-Spaces for Long-Form Video Understanding
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Observabilityは従来型の監視と何が違うのか(キンドリルジャパン社内勉強会:2022年10月27日発表)
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その32024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
Amazon SES を勉強してみる その22024/04/26の勉強会で発表されたものです。
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
NewSQLの可用性構成パターン(OCHaCafe Season 8 #4 発表資料)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
業務で生成AIを活用したい人のための生成AI入門講座(社外公開版:キンドリルジャパン社内勉強会:2024年4月発表)
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
論文紹介:Video-GroundingDINO: Towards Open-Vocabulary Spatio-Temporal Video Groun...
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
LoRaWAN スマート距離検出デバイスDS20L日本語マニュアル
新人研修 後半 2024/04/26の勉強会で発表されたものです。
新人研修 後半 2024/04/26の勉強会で発表されたものです。
Viewportのお話
1.
SmartPhone 用 view
を変化させる 魔法の meta タグ Viewport のお話
2.
Viewport とは? ウィンドウサイズにあわせて拡大率を可変させるおまじ ないです。 デフォルトで Viewport
の横幅は 980px に設定されてい ます。 例えば、横幅が 780px のウェブページでは 200px の余 白が生まれ、 またリキッド(可変)レイアウトのウェ ブページでは横幅が 980px に設定されます。 iPhone の実際の画面サイズは、縦に持った際は 320x480px 、横に持った際は 480x320px となりますの で、 デフォルトの 980px で表示した場合、 PC 概ね 1/3 ~ 1/2 程度のサイズに縮小表示されます。 その為、ペ ージを開いた時点では文字が小さすぎて判読出来ないこ とがしばしば起こり得ます。 xhtml にはこの Viewport を操作する Meta Tag が用意さ れています。 これにより、 PC 等他の環境からの閲覧 に影響を与えずに、 SmartPhone に適したウェブサイト
3.
Viewport の設定方法 <html> <head>
<meta name="viewport" content="[ プロパティ ]=[ 値 ](, [ プロパ ティ ]=[ 値 ])"> ・・・ </head> <body> ・・・ </body> </html>
4.
プロパティの詳細 プロパ
値 ティ 単位・指定方 内容 デフォルト 許容範囲 その他 法 Viewport の 特別な値として「 device-width* 」の width px 980px 200 ~ 10,000px 横 指定が可能 幅 Viewport の 横幅とアスペクト比か 特別な値として「 device-height* 」の height px 200 ~ 10,000px 縦 ら計算される値 指定が可能 幅 乗数で指定 minimum-scale (後述)~ 倍率の (例: 表示範囲から initial-scale maximum-scale (後 初期値 120% の場 計算される値 述) 合は 1.2 ) minimum- 倍率の 乗数で指定 0.25 0 ~ 10 scale 最小値 maximum- 倍率の 乗数で指定 1.6 0 ~ 10 scale 最大値 拡大縮小 no (拡大縮小不可)にすることで の user-scalable -- ( yes / no ) yes -- フォーム入力時のスクロールも 可 不可 否 えば以下は、 Viewport の横幅が iPhone のディスプレイのサイズで、倍率は 1 、 2 倍まで拡大可能、という内容です <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
5.
注意点 コンテンツより小さい viewport width/height
を設定すると無視 される viewport で initial-scale を設定せずに width/height を設定する と 全画面表示となる viewport で initial-scale も width/height も設定しないと width=980px/height=1091px となる 表示域とコンテンツのサイズが一致しない場合に initial-scale を設定すると、意図しないレイアウトが発生する ことがある
Download now