前端开发常见问题精选(二)

简介: 一、如何解决Canvas画布在移动端显示模糊的问题?Canvas画布在PC端显示正常,但是放在移动端却发现整个画布都有点模糊,其实这里有个比较简单的解决方法:先给canvas标签的width和height这两个属性值乘以2,再设置其样式中的width和height的实际大小,最后注意须将JS中与Canvas相关的数值均乘以2。

一、如何解决Canvas画布在移动端显示模糊的问题?

Canvas画布在PC端显示正常,但是放在移动端却发现整个画布都有点模糊,其实这里有个比较简单的解决方法:

先给canvas标签的width和height这两个属性值乘以2,再设置其样式中的width和height的实际大小,最后注意须将JS中与Canvas相关的数值均乘以2。

举个例子:

<!--PC端-->
<canvas id="canvas" width="400" height="200"></canvas>
<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext('2d');
        context.font = 'normal 40px "Microsoft Yahei"';
        context.textBaseline = 'top';
        context.fillText('Hello World!',0,0);
    };
</script>
<!--移动端-->
<canvas id="canvas" width="800" height="400" style="width: 400px; height: 200px;"></canvas>
<script>
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext('2d');
        context.font = 'normal 80px "Microsoft Yahei"';   //这里的字体大小放大了两倍
        context.textBaseline = 'top';
        context.fillText('Hello World!',0,0);
    };
</script>

通过以上两个端的代码对比应该就很清楚了,当然,设置Canvas的width和height属性也可以通过JS动态添加:

canvas.width = 800;
canvas.height = 400;

二、forEach()中不能通过给回调函数参数item赋值的方式来改变数组。

在之前我写的简述forEach()、map()、every()、some()和filter()的用法一文当中提到过forEach()的用法,并且知道array[index] === item,虽然如此,但我们却并不能将这两者完全同等看待。比如说我想要将一个数组中的每一项乘以2,可以这样写:

var arr = [1,2,3];
arr.forEach(function(item,index,array){
    array[index] *= 2; 
});
console.log(arr);   // [2, 4, 6]

但是我们却不能将例子中的array[index]直接替换成item,这是必须要注意的一点。

三、iOS系统和某些移动端不兼容background-attachment:fixed,该如何解决?

对于这样的CSS兼容性问题,还是直接找个替代方案吧,这里你可使用元素的position:fixed来替代。如果你不想新增一个空的标签元素,也可以使用伪元素::before或::after替代,在伪元素中设置背景图片后将其固定定位,也能达到与background-attachment:fixed相同的效果。

四、在iOS系统下的微信浏览器中,使用<audio>元素无法自动播放音乐,该如何解决?

如果是在PC端,我们完全可以仅仅使用<audio>就能实现音乐自动播放功能,就像下面这样:

<audio id="music" src="media/music.mp3" autoplay></audio>

是的,使用的是autoplay属性,轻松就能实现。然而在移动端,为了考虑兼容性,我们得这么写:

<audio id="music" src="media/music.mp3"></audio>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
var music = document.getElementById("music");
music.play();
document.addEventListener("WeixinJSBridgeReady", function () {   // 此处是对微信浏览器下的兼容处理
    music.play();
}, false);

事实上,在iOS系统中不仅仅只是微信浏览器下存在这样的问题,在其他浏览器下同样存在,而这里只是解决了微信浏览器下的问题,其他浏览器暂时还未找到合适的方法,如有小伙伴找到相应解决方案,欢迎补充~

以上是我在工作当中所遇到的一些问题总结,在此与大家共勉!

相关文章
|
编解码 缓存 前端开发
【经验分享】Web前端开发测试常见问题总结
案例总结web前端开发常见问题!欢迎留言、打卡!
436 0
【经验分享】Web前端开发测试常见问题总结
|
前端开发 索引 JavaScript
前端开发常见问题精选(四)
一、Swiper.js的loop模式下,如何正确获取索引值? Swiper.js,相信作为前端开发者的你一定知道它吧。它几乎可以用来制作任何形式的轮播图,非常方便和实用。
1004 0
|
Web App开发 前端开发
前端开发常见问题精选(三)
一、如何禁止微信h5页面默认下拉,并且同时页面局部可滚动? 众所周知,微信浏览器默认是可以上拉和下拉的,就像下面这样: 微信浏览器下拉 然而,有时候我们需要禁止它,那该怎么做呢? 1. 禁止页面的touchmove事件 document.addEventListener('touchmove',function(e){ e.preventDefault(); }); 该方法简洁明了,但是问题来了,浏览器默认下拉是禁掉了,可页面却不能滑动了。
1170 0
|
前端开发 iOS开发 移动开发
前端开发常见问题精选(一)
一、如何在元素自身及其父级宽高不确定的情况下让元素水平和垂直方向上居中? 这个问题最常见的就是让文字在浏览器窗口中水平和垂直方向居中了,因为文字的宽度和高度均不确定,浏览器窗口的宽高我们也不知道,那这个问题该如何解决呢? 1、50%定位+translate居中法 html,body{ height: 100%;} .
1077 0
|
8月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
95 0
|
8月前
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-地图单线程配置
前端学习笔记202305学习笔记第二十三天-地图单线程配置
64 0
前端学习笔记202305学习笔记第二十三天-地图单线程配置
|
8月前
|
前端开发 API
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-react-redux的工作流程
55 0
|
8月前
|
前端开发
前端学习笔记202306学习笔记第五十一天-工厂模式4
前端学习笔记202306学习笔记第五十一天-工厂模式
34 0
|
8月前
|
前端开发
前端学习笔记202305学习笔记第二十八天-数组结构之列表拖拽改变顺序4
前端学习笔记202305学习笔记第二十八天-数组结构之列表拖拽改变顺序4
32 0
|
4月前
|
前端开发 JavaScript
《Webpack5 核心原理与应用实践》学习笔记-> 构建微前端应用
《Webpack5 核心原理与应用实践》学习笔记-> 构建微前端应用
37 1