Html开发之viewport的使用

最新推荐文章于 2023-09-21 07:53:38 发布
最新推荐文章于 2023-09-21 07:53:38 发布
阅读量2.7k 收藏 1
点赞数 1
分类专栏： 【jQuery】 文章标签： viewport
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lcore/article/details/40653329
版权
近年来随着移动端的快速发展,越来越多传统的web应用需要适配移动终端,下面记录一下如何通过viewport实现简单的不同型号的手机端的适配问题。不过在此之前,介绍一下如何通过Chrome浏览器,调试在移动终端上的效果。调试工具     首先我们打开chrome谷歌浏览器,输入天猫地址(实现了手机端适配),按F12进入开发者模式。进入如下的界面:      接下来点击右下方圈红的
摘要由CSDN通过智能技术生成

    近年来随着移动端的快速发展,越来越多传统的web应用需要适配移动终端,下面记录一下如何通过viewport实现简单的不同型号的手机端的适配问题。不过在此之前,介绍一下如何通过Chrome浏览器,调试在移动终端上的效果。

调试工具

     首先我们打开chrome谷歌浏览器,输入天猫地址(实现了手机端适配),按F12进入开发者模式。进入如下的界面:

      接下来点击右下方圈红的部分,可以调出另一个控制台,如下界面:

      选择某个Device-设备,点击Emulate,之后重新刷新页面即可看到效果,这里我选中iphone5,具体效果如下：

最低0.47元/天 解锁文章
LCore
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
详解如何使用rem或viewport进行移动端适配
11-20
在开发移动端界面时，移动端适配一直是一个比较头疼的事情，常见的移动端适配有viewport适配，rem适配，百分比适配等等，在这里我们只介绍viewport适配和rem适配。看完这篇文章相信你应该会实战操作移动端对于不同手机大小的适配问题了。 一：rem适配 rem是指相对于根元素的字体大小(font-size)的单位，根标签的font-size=1rem。其可以称作为相对单位，也就是说我们可以通过视口的大小动态更新根元素字体大小(font-size)的值，从而动态更新rem所相对的值，使用使得移动端网页能够适配各种型号的手机。话不多说先上代码。 js代码(用于动态修改其根标签font-siz
HTML5移动端开发之viewport
web工程师——小发发
03-15 264
在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的页面适配或响应各种不同分辨率的移动设备。 什么是viewport? 移动前端中常说的viewport(视口)就是用户网页中的可视区域。 viewport是通过meta标签中的name属性设置的，添加位置在head标签里面。 它会告诉浏览器使用设备的屏幕宽度作为内容的宽度，并且忽视初始的宽度设置。 viewpor
移动前端开发和 Web 前端开发的区别是什么？
weixin_34278190的博客
02-27 246
2019独角兽企业重金招聘Python工程师标准>>> ...
Vue学习-1（17）更新 meta viewport
hell_csdn的博客
01-01 521
自动加的viewport不行 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 复制淘宝的 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"> 加到index.h.
web前端手册
caiqian97的博客
08-28 1667
HTML基础 1. HTML 文件中的 DOCTYPE 是什么作用？ HTML超文本标记语言: 是一个标记语言, 就有对应的语法标准 DOCTYPE 即 Document Type，网页文件的文档类型标准。 主要作用是告诉浏览器的解析器要使用哪种 HTML规范 或 XHTML规范 来解析页面。 DOCTYPE 需要放置在 HTML 文件的 <html>标签之前，如： <!DOCTYPE html> <html> ... </html> (目前主流) &
html5开发之viewport使用
09-28
HTML5 开发中，`viewport` 是一个至关重要的概念，特别是在构建适应各种移动设备的网页或应用时。`viewport` 是浏览器用来确定网页可视区域的一个虚拟窗口，它允许开发者控制网页在不同尺寸屏幕上的表现。当我们在...
html5 viewport使用方法示例详解
09-28
HTML5的viewport是一个至关重要的概念，特别是在开发适应各种移动设备的网页或应用时。Viewport是浏览器为呈现网页在小屏幕上创建的一种虚拟视口，它决定了网页的宽度、高度以及缩放行为。对于不同分辨率和屏幕尺寸...
HTML meta viewport属性详细说明
09-28
在移动设备的网页开发中，`<meta name="viewport">`标签扮演着至关重要的角色，它允许开发者控制网页在移动设备浏览器中的展示方式。Viewport并非仅限于iOS设备，而是Android和Windows Phone等平台普遍采用的一种...
html网页中meta viewport属性说明
09-28
总之，`viewport`属性是移动Web开发的关键，它使得开发者能够精细控制网页在各种移动设备上的呈现效果，提供更好的用户体验。理解和灵活运用`viewport`属性，是构建响应式和移动友好的网站或应用的重要步骤。
第一个H5网页
weixin_30606669的博客
08-12 150
1、添加viewport标签 <metaname="viewport" content="width=device-width,inital-scale=1.0,minimum-scale=0.5,maximum-scale=2.0,user-scalable=no"> width ---- viewport的宽度（width=device-width意思是：宽度...
Viewport学习笔记(一)
兰丝龙 专栏
12-26 2524
//--------------------------------------- var myData1 = [ ['操作菜单1', '操作菜单1'], ['操作菜单操作菜单操作菜单操作菜单操作菜单2', '操作菜单2'], ['操作菜单3', '操作菜单3'], ['操作菜单4', '操作菜单4'],
viewport 的基本原理以及使用
最新发布
每天都想吃好吃的
09-21 194
而在移动设备中，不同设备的像素密度是不一样的，css中的1px可能并不等于真实设备的一个像素值。移动端浏览器通常都在一个比屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是viewport，目的是正常展示没有做移动端适配的网页，可以让他们完整的展现给用户。事实上，width=device-width和initial-scale=1都代表应用ideal viewport，但在ipad、iphone等移动设备和IE上，横竖屏不分，默认都取竖屏的宽度，兼容性最好的写法就是。二.css中的像素和设备像素的区别。
移动端适配 - viewport
liuj4 | 自娱自乐
09-19 209
viewport是移动端适配时常用的属性，经常能看到下面这样的标签 <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=...
viewport 常见设置
日晞的博客
07-26 458
2.css中的1px在移动端屏幕中不一定是一个像素，看手机分辨率，而且随着用户对手机的缩放，1px对应的像素也随之增大。1.菜鸟教程对viewport的解释。viewport就是移动设备看网页的区域。
菜鸟教程
MichaelAn的博客
02-13 519
菜鸟教程 1、 viewport <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> - width: 设...
响应式布局之viewport-超级简单
故里2130
02-13 1560
多的就不说了，但是要补充一点，最重要的是： 使用vite创建和官网不一样，不需要创建postcss.config.js，直接在vite.config.js中创建就行了，或者创建postcss.config.js后，必须在vite.config.js中引用。上面的文章可以实现响应式布局，根据浏览器的大小变化而变化，但是相对于viewport来说，之前的还是有点复杂，而使用viewport更加的简单。那么代码的大小，就是实际的大小，必须是这里的400px，600px。1600px的电脑效果，宽度响应式变小了。
html：详解viewport
yunduanaoligei的博客
11-03 5836
今天分享下”html：详解viewport“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 一.viewport的概述 ​手机端电脑浏览器一般都是在一个比显示屏更宽的虚拟对话框中3D渲染页面，这一虚拟对话框便是viewport，目地是一切正常展现沒有做移动端适配的网页，能够让她们详细的呈现给客户。大家有时候用移动设备浏览pc端网页就会见到一个横着下拉列表，这儿可表明范围的宽度便是viewport的宽度。 基本应用，页
viewport的width值应该怎么设置
fustar925的博客
04-17 3813
前端响应式布局中我们常见设置viewport的width=device-width。但是，当我们看到一种新的viewport设置思路的时候，我们知道viewport的width也可以设置成一个固定值。详见：《响应式布局及设计-一种新的viewport设置观点》对于这个固定的值，我们该怎么设置呢？ 首先，我们先说说这个width的值，主要影响的是什么呢？根据我们以往的移动端开发经验往往网页的基础字号...
HTML中viewport（APICloud-viewport）
qq_37899792的博客
03-25 599
viewport viewport 是由 Apple 公司为了让更多桌面网站可以在 safari 浏览器内正常显示而推出的解决方案，后被各大浏览器支持。 使用 viewport 可以自定义当前页面在浏览器中以何种分辨率显示。 而 APICloud 应用由于在引擎层做了多屏幕适配工作，如手动指定 viewport 为某个具体的数值时，可能会造成我们的应用页面显示变形。 在 APICloud ...
html viewport
09-09
### 回答1： HTML视口（Viewport）指的是网页在浏览器中显示的区域，它通常是指浏览器窗口内的可见区域。视口的大小会随着浏览器窗口的大小而改变。在HTML中，可以通过meta标签来设置视口的大小、缩放比例以及禁止缩放等属性，以适应不同的设备和屏幕大小。通过合理设置视口属性，可以使网页在不同的设备上以最佳的显示效果呈现，提高用户体验。 ### 回答2： HTML视口（viewport）是指浏览器中用于显示网页内容的窗口大小。在移动设备上，由于屏幕尺寸较小，需要对网页内容进行适配以便用户能够更好地浏览和使用。这时候我们就可以通过设置HTML的viewport来实现适配。 通过在HTML的头部加入以下meta标签可以设置viewport的各种属性： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 其中，width表示设备宽度，device-width表示设备的实际宽度。initial-scale表示初始缩放比例，1.0表示不进行缩放，即以1:1的比例显示网页内容。 除此之外，还可以使用其他属性来进行更精确的设置，如： - user-scalable：指定用户是否可以手动缩放网页，默认值为yes，表示可以缩放； - minimum-scale：设置最小缩放比例； - maximum-scale：设置最大缩放比例； - height：设备高度，device-height表示设备的实际高度。 通过设置不同的viewport属性，我们可以实现网页内容在移动设备上的自适应，使得用户无论在任何尺寸的设备上都能够方便地浏览和使用网页。同时，通过限制缩放比例和设备尺寸，还可以保证页面在不同设备上的显示效果和布局的一致性。 总之，HTML视口是用来设置移动设备上网页内容展示的窗口大小。通过设置不同的属性，我们可以实现网页在不同设备上的自适应，提供更好的用户体验。 ### 回答3： HTML 的 viewport 是指浏览器中用于显示网页内容的可视区域。viewport 的大小随着浏览器窗口的大小改变而改变。 在移动设备上，viewport 是一个特殊的概念。因为设备的屏幕尺寸有限，而网页通常设计和开发是基于更大的桌面屏幕尺寸。为了适应不同设备的宽度，移动设备的浏览器必须对网页进行缩放和适配。 为了解决这个问题，HTML5 引入了 viewport meta 标签。我们可以通过在网页头部添加以下代码来设置 viewport： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 上述代码中，width=device-width 表示 viewport 的宽度应该等于设备的宽度。initial-scale=1.0 表示页面的初始缩放比例为 1.0。 通过设置 viewport ，我们可以确保网页在不同设备上显示一致，并且适应设备的屏幕尺寸。这对于移动设备上的用户体验至关重要。 另外，viewport 还可以控制网页的缩放行为。通过在 viewport meta 标签中设置 user-scalable=no ，可以禁用用户对页面进行缩放操作。 总之，HTML 的 viewport 是指浏览器中用于显示网页内容的可视区域。通过设置 viewport meta 标签，我们可以对网页的宽度、缩放行为等进行控制，以实现在不同设备上的适配和一致的显示效果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值