Vue学习-1（17）更新 meta viewport

最新推荐文章于 2023-12-05 11:27:59 发布
最新推荐文章于 2023-12-05 11:27:59 发布
阅读量580 收藏
点赞数
分类专栏： vue学习
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/hell_csdn/article/details/112057684
版权
本文介绍了在Vue项目中如何正确设置meta viewport，以解决自动添加的viewport不生效的问题。通过参考淘宝的配置，并将其应用到index.html文件中，同时提到了在WebStorm中切换自动换行的设置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

  • 自动加的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">

image-20201230203039990

  • 加到index.html
    image-20201230203302579
  • 切换webstorm自动换行
    image-20201230203219555

vue项目实战系列十四：viewport引入
m0_68635815的博客
02-14 269
通过meta tag,让开发者来控制viewport的大小和缩放.
Vue3 vite使用postcss-px-to-viewport（适配vant）
行如逆水行舟，不进则退
06-26 732
【代码】Vue3 vite使用postcss-px-to-viewport（适配vant）
vue修改meta值_vue动态修改route里的meta属性 ！求解答~~1
weixin_39693437的博客
12-22 6962
动态修改router里的meta属性;router.js{path:'/detail',meta:{title:'详情',isnavbar:false,istabbar:false},components:()=>import('xxx.vue')}路由配置默认route.js的meta里的配置;App.vue这是在app.vue页面，统一的一个头部和底部导航detail.vueexport...
vue2 移动配置 meta 的 viewport 控制移动端屏幕自适应的方法
完备创新
04-14 3381
问题描述： 在移动端开发时，遇到需要设置移动端自适应全屏的时候，发现这个功能，和普通的HTML不一样，不是每个页面都有这个配置后，网上进行百度了一圈发现没有类似的标题的文章，可能每个人的理解不一样吧，哈哈，这个算是融合之前比较简单的方法，其实还有很多方法。 欢迎给出建议和意见完善文章，让更多人的不走弯路。 方法一（比较简单）： 1.找到vue目录下的index.html文件，进行修改，如下图 代码如下： <meta name="viewport"...
meta 标签中的 viewport
m0_38135164的博客
12-05 1011
meta标签解决H5页面适配问题
vue 动态修改页面的meta
热门推荐
晴天有何特别
10-07 1万+
这里提供两种方式，推荐使用第二种 方式1 routes: [ { name:'home', path: '/home/:openname', component: Home, meta: { title: '首页' } } ] 方式2 安装 npm inst...
meta标签 viewpoint
weixin_30892889的博客
04-08 276
　　还有一个不可或缺的东东，那就是meta标签，可以说，在响应式设计中如果没有这个meta标签，你就是蹩脚的，响应式设计就是空谈。其使用方法如下 <meta name=”viewport” content=”” /> 　　在content属性中主要包括以下属性值，用来处理可视区域。　　 　　在实际项目中，为了让Responsive设计在智能设备中能显示正常，也就...
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
08-29
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结 在移动客户端手机页面布局中，meta标签的使用非常重要，今天我们将详细介绍meta标签中的几个关键属性，包括...
详解使用vue-admin-template的优化历程
08-27
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vue-admin-template <!-- 同时也要引入对应版本的 css --> <link href="https://cdn.bootcss.com/element-ui/2.3.2/theme-chalk...
vue3 router导航守卫动态设置全局/局部meta，不用vue-meta
weixin_44841138的博客
05-03 6359
最近整合了几个之前做的vue微型前端项目，整合以后发现需要全局修改meta，顺便根据不同路由设定一下title和keywords之类的头部信息。 搜索网上的解决方案，大部分解决方案是对vue2的，使用vue-meta插件。 vue3之后，对应的vue-meta版本默认是alpha版，可能会出现问题，需要强制修改版本号。想换个方法处理，于是想到在导航守卫中，可以对document头部信息进行动态修改和设置。 主要思路： 在router/index.j...
vue修改meta值_Vue响应式添加、修改数组和对象的值
weixin_39685697的博客
12-31 326
这篇文章主要为大家详细介绍了Vue响应式添加、修改数组和对象的值，具有一定的参考价值，可以用来参考一下。感兴趣的小伙伴，下面一起跟随512笔记的小编两巴掌来看看吧！有些时候，不得不想添加、修改数组和对象的值，但是直接添加、修改后又失去了getter、setter。由于 JavaScript 的限制， Vue 不能检测以下变动的数组：1. 利用索引直接设置一个项时，例如： vm.items[inde...
meta标签的viewpoint说明
dandanxing的博客
01-04 3771
常用的针对移动端网页的meta viewpoint大致是: <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" /> 这段代码的意思是，让viewport的宽度等于物理设备上的真实分辨
meta标签的viewport用法简单介绍
weixin_33725272的博客
03-28 156
通常会用在移动端的页面设计，下面简单介绍一下它的一些相关属性的作用，需要的朋友可以做一下参考，当然还有更详细的介绍，可以自行在网络上查询，先看一段实例: 1 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0...
vue修改meta值_vue获取修改后p标签的值
weixin_39601657的博客
12-22 443
https://github.com/users/frgyy777888/projects/27861https://github.com/users/frgyy777888/projects/27862https://github.com/users/frgyy777888/projects/27863https://github.com/users/frgyy777888/projects/2...
Vue 页面单独设置Meta
chengmin123456789的博客
10-29 2550
1、安装组件 npm install vue-meta --save 2、main.js中引入组件 import Meta from 'vue-meta' Vue.use(Meta) 3、具体的页面 metaInfo: { title: 'This is the test', meta: [ // { charset: 'utf-8' }, // { name: 'viewport', content: 'width=device-width,initial-sca..
vue修改meta值_Vue2 SSR渲染根据不同页面修改 meta_凊蒝_前端开发者
weixin_35688434的博客
01-13 767
本文主要介绍了Vue2 SSR渲染根据不同页面修改 meta，分享给大家，具体如下：注意:经过测试,以现在 vue2 的 服务端渲染模式, 都是通过 webpack 生成这时候我们可以借助安装Yarnyarn addNPMnpm install准备插件在router/index.import服务端渲染在server-entry.import { app, router, store } from ...
vue修改meta值_【转】vue中动态设置meta标签和title标签
weixin_39754398的博客
12-22 1932
因为和原生的交互是需要h5这边来提供meta标签的来是来判断要不要显示分享按钮，所有就需要手动设置meta标签，标题和内容//router内的设置{path: '/teachers',name: 'TDetail',component: TDetail,meta: {title:"教师详情",content: 'disable'}},{path: '/article',name: 'Article...
Vue.js - WebApp meta 移动端配置
02-09 2003
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0
第一个H5网页
weixin_30606669的博客
08-12 199
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意思是：宽度...
postcss-px-to-viewport 页面显示过大
最新发布
01-01
### 解析 postcss-px-to-viewport 导致页面显示过大的原因 当使用 `postcss-px-to-viewport` 插件时，如果配置不当可能会导致页面元素尺寸异常放大。通常情况下，这可能是由于视口单位转换的比例设置不合理造成的[^1]。 ### 配置调整建议 为了修正这一问题，需仔细检查并适当调整插件的配置参数： #### 1. 设置合理的 viewport 单位比例 确保在项目中的 PostCSS 配置文件里指定了合适的宽度作为基准来计算其他元素大小。例如，在 vue.config.js 或者 webpack 中的相关配置部分加入如下代码片段: ```javascript const pxToViewport = require('postcss-px-to-viewport') module.exports = { css: { loaderOptions: { postcss: { plugins: [ pxToViewport({ unitToConvert: 'px', // 要转化的单位，默认为"px" viewportWidth: 750, // 设计稿的宽度 viewportHeight: 1334,// iPhone6 的高度，可根据实际需求修改 propList: ['*'], // 指定转换的属性列表 selectorBlackList: [],// 不需要转换的类名前缀 minPixelValue: 1, // 小于或等于此数值将不做处理 mediaQuery: false, // 是否开启媒体查询里的值也做相应的转换 exclude: /(\/|\\)(node_modules)(\/|\\)/ // 排除 node_modules 文件夹下的文件不被转换 }) ] } } } } ``` 上述配置中特别需要注意的是 `viewportWidth` 和 `minPixelValue` 参数的选择。前者决定了设计图的标准宽度；后者则控制着最小可转换单位，防止不必要的精度损失[^2]。 #### 2. 确认 HTML 文档头部已声明正确的 meta 标签 除了正确配置插件外，还需保证网页 `<head>` 区域内存在用于定义设备屏幕缩放行为的meta标签： ```html <meta name="viewport" content="width=device-width, initial-scale=1"> ``` 这条语句的作用在于告知浏览器按照当前设备的实际分辨率渲染页面，并保持初始缩放级别不变，从而避免因默认缩放而导致的整体布局失真现象[^3]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值