Html开发之viewport的使用

最新推荐文章于 2024-08-31 09:13:12 发布
最新推荐文章于 2024-08-31 09:13:12 发布
阅读量2.7k 收藏 1
点赞数 1
分类专栏： 【jQuery】 文章标签： viewport
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lcore/article/details/40653329
版权
本文介绍了如何利用Chrome浏览器调试移动端效果，并详细阐述了viewport的概念和作用，包括其在移动端适配中的关键作用。通过设置viewport的width、height、initial-scale、maximum-scale、minimum-scale和user-scalable属性，可以实现简单网页的手机适配。同时，文章提供了一个web版2048游戏的适配Demo，展示viewport的实际应用。
摘要由CSDN通过智能技术生成

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

调试工具

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

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

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

最低0.47元/天 解锁文章
LCore
关注
专栏目录
html5开发之viewport使用
11-21
随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行，移动互联应用开发也越来越受到人们的重视，用html5开发移动应用是最好的选择。然而，每一款手机有不同的分辨率，不同屏幕大小，如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢？学习html5 viewport的使用能帮你做到这一点……viewport 语法介绍： 复制代码代码如下: <!– html document –> <meta name=”viewport” content=” height = [pixel_value | device-height] ,
viewport 的基本原理以及详细使用方法
12-14
一.viewport的概要 移动端浏览器通常都在一个比屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是viewport，目的是正常展示没有做移动端适配的网页，可以让他们完整的展现给用户。我们有时用移动设备访问桌面版网页就会看到一个横向滚动条，这里可显示区域的宽度就是viewport的宽度。 常规使用，页面可以缩放就用下面的代码 <meta name="viewport" content="width=device-width, initial-scale=1" /> 如果不想页面缩放就用下面的代码 <meta name="viewport" content="width=device-wi
开源项目 Viewport 使用教程
最新发布
gitblog_01101的博客
08-31 663
开源项目 Viewport 使用教程 viewportcreate custom scrolling indicator项目地址:https://gitcode.com/gh_mirrors/vi/viewport 1、项目介绍 Viewport 是一个用于管理网页视口（viewport）的 JavaScript 库。它允许开发者轻松控制网页在不同设备上的显示效果，确保网页在移动设备和桌面设备上...
viewport的使用
m0_62903673的博客
04-27 353
咱们每个人的手机都有不同的分辨率，不同的屏幕大小，如何使我们开发的应用或页面大小能适合各种高端手机使用？学习html5 viewport就能帮助我们实现这一点. <meta name="viewport" content="width=devbice-width, initial-scale=1.0, maxinum-scale=5.0, user-scalable=0"> 其中， width=devbice-width；设置宽度为屏幕宽度 maxinum-sc...
前端viewport的使用
lovewulibingbing的博客
08-23 449
前段viewport的使用   meta name="viewport" content="width=device-width,initial-scale=1.0" 解释  <meta name="viewport" content="width=device-width,initial-scale=1.0">   content属性值 :   &nb
html标签viewport,· HTML使用Viewport
weixin_32058991的博客
06-23 535
CSharpGL&lpar;35&rpar;用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口CSharpGL(35)用ViewPort实现类似3DMax那样的把一个场景渲染到4个视口 开始 像下面这样的四个视口的功能是很常用的,所以我花了几天时间在CSharpGL中集成了这个功能. 在CSh ...移动WEB开发之viewport问题: 在codepen上写了一个...
关于HTML5中meta name=“viewport“ 的用法
热门推荐
自然醒
11-01 7万+
vieport，移动端布局
HTML5移动端开发中的Viewport标签及相关CSS用法解析
11-21
HTML5移动端开发中，`<viewport>`标签是一个至关重要的元素，它主要负责调整网页在不同设备上的显示方式，尤其在移动设备上。`<meta name="viewport">`元标签允许开发者精确控制页面的布局视口（layout viewport）、...
html5 viewport使用方法示例详解
09-28
HTML5的viewport是一个至关重要的概念，特别是在开发适应各种移动设备的网页或应用时。Viewport是浏览器为呈现网页在小屏幕上创建的一种虚拟视口，它决定了网页的宽度、高度以及缩放行为。对于不同分辨率和屏幕尺寸...
HTML5中meta name="viewport"
weixin_30608503的博客
05-09 166
viewport具体用法为:使用该meta标签时，在content中写属性，用逗号隔开 　　　　　　 属性名备注 width 设置layout viewport 的宽度，为一个正整数，使用字符串”width-device”表示设备宽度 initial-scale 设置页面的初始缩放值，为一个数字，可以带小数 minimum-scale 允许用户...
html：详解viewport
yunduanaoligei的博客
11-03 6502
今天分享下”html：详解viewport“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 一.viewport的概述 ​手机端电脑浏览器一般都是在一个比显示屏更宽的虚拟对话框中3D渲染页面，这一虚拟对话框便是viewport，目地是一切正常展现沒有做移动端适配的网页，能够让她们详细的呈现给客户。大家有时候用移动设备浏览pc端网页就会见到一个横着下拉列表，这儿可表明范围的宽度便是viewport的宽度。 基本应用，页
HTML中viewport（APICloud-viewport）
qq_37899792的博客
03-25 651
viewport viewport 是由 Apple 公司为了让更多桌面网站可以在 safari 浏览器内正常显示而推出的解决方案，后被各大浏览器支持。 使用 viewport 可以自定义当前页面在浏览器中以何种分辨率显示。 而 APICloud 应用由于在引擎层做了多屏幕适配工作，如手动指定 viewport 为某个具体的数值时，可能会造成我们的应用页面显示变形。 在 APICloud ...
html的根本原理,viewport 的基本原理以及详细使用方法
weixin_39748773的博客
05-30 96
一.viewport的概要移动端浏览器通常都在一个比屏幕更宽的虚拟窗口中渲染页面，这个虚拟窗口就是viewport，目的是正常展示没有做移动端适配的网页，可以让他们完整的展现给用户。我们有时用移动设备访问桌面版网页就会看到一个横向滚动条，这里可显示区域的宽度就是viewport的宽度。常规使用，页面可以缩放就用下面的代码如果不想页面缩放就用下面的代码二.css中的像素和设备像素的区别在桌面网页开发...
html viewport w3c,视口（viewport）
weixin_36074800的博客
06-18 194
讲述meta视口标签和媒体查询相关的内容。示例代码：@media screen and (max-width:480px) {// some style}像素(pixel)设备像素：设备屏幕的物理像素。CSS像素：为Web开发者创造的，在CSS和JS中使用的一个抽象层。CSS像素和设备像素的比例取决于屏幕是否高DPI和用户缩放的比例。三个视口桌面上视口宽度等于浏览器宽度，但在手机上有所不同。布局视...
html meta中的viewport指令
Rio：
08-24 950
什么是Viewport 手机浏览器是把页面放在一个虚拟的“窗口”（viewport）中，通常这个虚拟的“窗口”（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动版的浏览器最新引进了 viewport 这个 meta tag，让网页开发者来控制 viewport 的大小和缩放，其他手
html5之viewport
jhqdlove的专栏
03-17 542
viewportviewport是用来使移动端页面适配不同的手机屏幕的，它的语法如下： <meta name="viewport" content=" height = [pixel_value | device-height] , width = [pixel_value | device-width ] ,
viewport属性
三心草的博客
09-04 2460
关键字： 移动端页面 手机页面viewqport 是我们手机上的虚拟窗口、视觉窗口、显示区域 他的作用就是创建一个虚拟窗口<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 d
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值