masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > html tutorial > viewport在移动设备上的兼容性介绍

viewport在移动设备上的兼容性介绍

零下一度
Lepaskan： 2017-07-26 17:16:24
asal
2041 orang telah melayarinya
移动设备上的viewport分为layout viewport  、 visual viewport   和 ideal viewport  三类，
其中的ideal viewport是最适合移动设备的viewport，ideal viewport的宽度等于移动设备的屏幕宽度，只要在css中把某一元素的宽度设为ideal viewport的宽度(单位用px)，那么这个元素的宽度就是设备屏幕的宽度了，也就是宽度为100%的效果。
ideal viewport 的意义在于，无论在何种分辨率的屏幕下，那些针对ideal viewport 而设计的网站，不需要用户手动缩放，也不需要出现横向滚动条，都可以完美的呈现给用户。
 
因为所有的iphone的理想viewport宽度都是320px，所以让H5页面适应所有的iphone手机以及安卓机型的简单粗暴的方法是：设置viewport
   
 
meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持，事实也证明这个东西还是非常有用的。在苹果的规范中，meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值)，如下：
width 设置layout viewport  的宽度，为一个正整数，或字符串"width-device"
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
height 设置layout viewport  的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
这些属性可以同时使用，也可以单独使用或混合使用，多个属性同时使用时用逗号隔开就行了。

Atas ialah kandungan terperinci viewport在移动设备上的兼容性介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
viewport keserasian
sumber：php.cn
Artikel sebelumnya：多种多样的loading动画分享 Artikel seterusnya：CSS border属性深度讲解
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel terbaru oleh pengarang
Isu terkini
Lancarkan penyemak imbas telus untuk meningkatkan pengalaman aplikasi web dan PWA [menyokong HTML statik, CSS dan JavaScript] [membenarkan pengguna melihat kertas dinding desktop dalam aplikasi web/PWA kami] Saya seorang pembangun dan pereka bentuk hadapan junior yang sedang membangunkan aplikasi ...
daripada 2024-04-05 13:50:12
0
1
1367
Gunakan perpustakaan yang dipasang secara tempatan dalam halaman tapak web Adakah mungkin untuk menggunakan perpustakaan (.dll, .ocx) yang ditulis untuk sistem penge...
daripada 2024-04-05 00:15:49
0
1
3563
Sudut 7 alih keluar atribut pendua dalam SCSS AngularSASS (.scss) menjalurkan sifat. Bagaimanakah saya boleh menghalang perkara ini dari...
daripada 2024-04-04 23:28:54
0
1
1382
Mencuba segala-galanya tetapi masih kandungan HTML tidak ditunjukkan Pada asasnya, kandungan dokumen html tidak akan memaparkan apa-apa pada penyemak imbas. Do...
daripada 2024-04-04 19:16:15
0
1
3496
Bolehkah hos pelayan Node aplikasi React? Saya sangat baru dalam pengekodan bahagian belakang dan saya mengalami kesukaran untuk mem...
daripada 2024-04-04 14:32:25
0
1
389
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan