处理HTML5手机上端网页页面放缩的难题

2021-02-23 17:53 jianzhan

一般在写HTML5手机上端网页页面的情况下,大家会发现网页页面所显示信息元素的占比有误,那此时大家必须加上的便是:

<meta name="viewport" content="width=device-width,initial-scale=1">

或是

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

那末大家来对这句话解释1下便是:

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" /> 

 或是不容许客户放缩网页页面  user-scalable=no

总结

以上所述是网编给大伙儿详细介绍的处理HTML5手机上端网页页面放缩的难题,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!