简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Rumah > hujung hadapan web > Tutorial H5 > teks badan

html5手机端页面缩放问题的解决详解

黄舟
Lepaskan： 2017-10-30 10:07:08
asal
2496 orang telah melayarinya

通常在写HTML5手机端页面的时候，我们会发现页面所显示元素的比例不正确，那此时我们需要添加的就是：

<meta name="viewport" content="width=device-width,initial-scale=1">
Salin selepas log masuk

或者是

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
Salin selepas log masuk

那么我们来对这句话解释一下就是：

viewport ： 表示的是显示窗口；

width=device-width,initial-scale=1.0 ： 表示的是显示窗口的宽度等于设备的屏幕宽度，initial-scale=1.0，即初始的缩放比例为1.0；

minimum-scale ： 表示的是允许缩放的最小比例

maximum ： 表示的是允许缩放的最大比例

user-scalable ： 表示是否允许用户进行页面的缩放，值可以为yes或者no

实例问题情况：

现象：

当用户在手机端页面当中点击input输入框进行文本的编辑时，页面会自动的被放大

解决：

在页面的头部<head>标签中插入

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0" />
Salin selepas log masuk

 或者是不允许用户缩放页面  user-scalable=no

总结

Atas ialah kandungan terperinci html5手机端页面缩放问题的解决详解. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan：
h5 html5
sumber：php.cn
Artikel sebelumnya：html5中LocalStorage本地存储的示例 Artikel seterusnya：Html5斗地主棋牌架设Canvas实现斗地主游戏代码解析
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
Bagaimanakah saya boleh mendapatkan imej saya dipaparkan pada paparan utama halaman? Apa yang saya mahu lakukan ialah menerima beberapa gambar menggunakan NASAAPI. Foto-foto i...
daripada 2024-04-06 15:33:12
0
1
433
Bolehkah fail PDF menjalankan HTML5 dan Javascript? Saya mempunyai idea bodoh untuk mencuba dan membuat program yang tidak akan disekat pada m...
daripada 2024-04-05 12:57:00
0
1
456
Apakah perbezaan antara enctype dan formenctype dalam HTML5? Saya hanya tertanya-tanya apakah perbezaan antara atribut enctype dan formenctype dalam HT...
daripada 2024-04-02 11:47:56
0
1
275
Jadikan halaman itu mesra mudah alih? Saya mempunyai banyak halaman web dan beberapa laman web. Masalahnya, saya seorang pemula....
daripada 2024-04-01 20:42:38
0
1
259
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
Tentang kita Penafian Sitemap
Laman web PHP Cina：Latihan PHP dalam talian kebajikan awam，Bantu pelajar PHP berkembang dengan cepat！