IT编程 > 网页制作 > HTML

HTML+CSS:viewport的写法,跟图片也有关系

135人参与2020-07-07

viewport:设备显示网页的那部分区域,在移动端的开发起着至关重要的作用。

一、meta

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

content的属性值:

首先,不建议禁用缩放,比如下面的写法:

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

这样做会导致的问题:

  1. 实现图片预览的时候,无法双指滑动进行放大、缩小,在体验上超别扭;
  2. IOS端适配的问题(DPI)(没有IOS,因此没测试,可能是最初的iphone屏幕才会出现适配的问题吧)

那么,应该怎样使用呢?一般来说,只设置允许最小的比例是1.0就足够了,具体写法:

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
  //或
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.5" />

二、CSS

利用css的@viewport做适配,但真正做设备适配的代码,不只用到这一个属性。
@viewport可以设置宽度、高度、缩放系数、文档方向等,参考文档(developer.mozilla.org/......)
代码兼容:

@-webkit-viewport {
        width: device-width;
 }
@-moz-viewport {
        width: device-width;
 }
@-ms-viewport {
        width: device-width;
}
@-o-viewport {
        width: device-width;
 }
@viewport {
        width: device-width;
}

不过,将设备的width设置为device-width,依然建议通过meta来实现。

本文地址:https://blog.csdn.net/yyl262/article/details/107170948

您对本文有任何疑问!!点此进行留言回复

推荐阅读

猜你喜欢

HTML+CSS:viewport的写法,跟图片也有关系

07-07

jQuery实现小游戏源代码--打灰太狼

07-07

css3滤镜开发模糊背景效果(99)

07-07

(1)爬虫笔记备份

07-07

1103. 分糖果 II 数学问题

07-07

Django 前后端数据交换

07-07

拓展阅读

大家都在看

前端页面点击图片放大功能(viewerjs插件的简单而强大)

08-20

京训钉自动播放,京训钉自动续播,京训钉刷课时,京训钉自动关弹窗,京训钉自动下一课

08-12

WVP+ZLMediaKit+MediaServerUI实现摄像头GB28181推流播放录制

08-12

R2S搭配即插即用的4G Cat4实现4G转有线以太网的应用演示

11-17

R2S搭配即插即用的4G Cat4实现4G转有线以太网的应用演示

11-17

7-2 交换最小值和最大值 (15分)

10-26

解决uniapp小程序打包体积超过2M,提示包体积超过2M,“main packagexxx”,不给上传和预览的解决办法,绝对有效!

08-14

Solr 8-7的安装、配置

11-13

热门评论