meta viewport 怎样处理 移动端 1px 被 渲染成 2px 问题

2 篇文章 0 订阅

首先我们看下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宽度,为一个正整数,或字符串‘device-width’
    // device-width  设备宽度
    // height   设置viewport高度,一般设置了宽度,会自动解析出高度,可以不用设置
    // initial-scale    默认缩放比例(初始缩放比例),为一个数字,可以带小数
    // minimum-scale    允许用户最小缩放比例,为一个数字,可以带小数
    // maximum-scale    允许用户最大缩放比例,为一个数字,可以带小数
    // user-scalable    是否允许手动缩放

延伸 提问

怎样处理 移动端 1px 被 渲染成 2px 问题

1 局部处理
   meta标签中的 viewport属性 ,initial-scale 设置为 1 
   rem 按照设计稿标准走,外加利用transform 的scale(0.5) 缩小一倍即可;
2 全局处理
   meta标签中的 viewport属性 ,initial-scale 设置为 0.5
   rem 按照设计稿标准走即可

更多内容请查看原文地址:https://www.codelovers.cn/article/20180304105234.html

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,以下是一个实现在移动HTML中调用摄像头并支持美颜的示例代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Camera Beauty</title> <style> #videoElement { width: 100%; height: auto; max-width: 600px; margin: 0 auto; } </style> </head> <body> <video id="videoElement"></video> <script> // 获取video元素 const video = document.getElementById('videoElement'); // 判断是否支持调用摄像头 if (navigator.mediaDevices.getUserMedia) { // 调用摄像头 navigator.mediaDevices.getUserMedia({ video: true }) .then(function (stream) { // 将摄像头渲染到video元素中 video.srcObject = stream; }) .catch(function (error) { console.log("Something went wrong!"); }); } // 美颜滤镜 const setFilter = () => { // 创建canvas元素,用于渲染滤镜效果 const canvas = document.createElement('canvas'); const context = canvas.getContext('2d'); canvas.width = video.videoWidth; canvas.height = video.videoHeight; context.drawImage(video, 0, 0, canvas.width, canvas.height); const imageData = context.getImageData(0, 0, canvas.width, canvas.height); const data = imageData.data; for (let i = 0; i < data.length; i += 4) { let r = data[i]; let g = data[i + 1]; let b = data[i + 2]; data[i] = (r * 0.393) + (g * 0.769) + (b * 0.189); data[i + 1] = (r * 0.349) + (g * 0.686) + (b * 0.168); data[i + 2] = (r * 0.272) + (g * 0.534) + (b * 0.131); } context.putImageData(imageData, 0, 0); // 将滤镜效果渲染到video元素中 video.style.backgroundImage = `url(${canvas.toDataURL()})`; }; // 调用美颜滤镜 video.addEventListener('play', () => { setInterval(setFilter, 10); }, false); </script> </body> </html> ``` 其中,通过 `navigator.mediaDevices.getUserMedia` 方法调用摄像头,将摄像头渲染到 `<video>` 元素中;通过 `setFilter` 方法实现美颜滤镜效果,并将滤镜效果渲染到 `<video>` 元素中。最终实现在移动HTML中调用摄像头并支持美颜的功能。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值