移动端适配之比例缩放适配

前面一篇简单介绍了适配的方案(百分比适配),对于百分比的适配也是挺多问题,这次介绍一下viewport适配方案!

适配的思想呢?就是比如ip6的设备独立像素(375px),这个设备独立像素介绍移动端时候说过可以使用缩放进行改变!此时我们可以将所有的设备的独立设备像素转为375px(ip6的),然后进行渲染适配,在375px上就行布局!

那么这个比例缩放适配存在什么问题呢?

在大屏的设备下,渲染的也是375,无法充分的发挥大屏效果不能得到用户体验,可以在不同设备下进行不同像素渲染!

解决方案:使用js代码获取当前设备的独立设备像素,转换为同一的375;

		<script>
			//自制行函数
			( function(){
			var curWidth=window.screen.width;
			var tarWidth=375;
			var scalc=curWidth/tarWidth;
			//创建新的标签
			var meta=document.createElement('meta');
			meta.name="viewport";
			meta.content="initial-scale="+scalc+",minimum-scale="+scalc+",maximum-scale="+scalc+",user-scalable=no"
			//插入到head的子元素
			document.head.appendChild(meta)
			}
			)()
		</script>

          然后进行去设置,这个宽度和高度相对于之前的百分比适配很好的提升,对于不同的设备渲染也比百分比好很多!但是750px的图像等,在原始独立像素大于414的设备可能出现图像失真等问题,后面会详细介绍一下移动端终极适配方案rem适配

本博客所有文章如无特别注明均为原创。作者:十月梦想 ,复制或转载请以超链接形式注明转自 十月梦想博客 。 原文地址《移动端适配之比例缩放适配

分享到:更多

标签: 移动端适配 比例缩放适配

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏天天

css中mask属性实现灯光闪动

在过去,CSS mask属性在使用的时候就是mask: xxx,但是现在随着这个属性的规范化,mask属性实际上已经成为了诸多mask-*的缩写,这和backg...

28630
来自专栏姬小光

像素眼是怎样炼成的

传说的像素眼,也就是可以快速分辨出 1px 以上差异的双眼,往往由资深设计师所 get√,小鸡君本人是个苦逼程序员,但小鸡君的像素眼也不比任何一个设计师差。

12940
来自专栏向治洪

实用Android 屏幕适配方案分享

实用Android 屏幕适配方案分享 真正可用,并且简单易行,可以在多个屏幕大小和屏幕密度上有良好表现的Android 屏幕适配方案,已用在一款成熟互联网应用...

69070
来自专栏互联网杂技

如何打造一个高效适配的H5

以往拿到一份视觉稿要做页面适配,通常都是针对不同分辨率尺寸做断点写 media query,然后看效果再微调。开发过程中视觉稿要是做了修改,修改的地方就得再走一...

36450
来自专栏佳爷的后花媛

零碎之viewport

在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta...

17140
来自专栏老马寒门IT

04-移动端开发教程-在线字体图标

在IE4开始微软就已经开始支持在线字体,不过没有流行起来,直到CSS3新增加了font-face模块,正式纳入了web开发的标准。也渐渐流行起来而且发掘了很多其...

45860
来自专栏华章科技

天天做饼图,你烦不烦?老板都看腻了!

好象也没毛病,也挺好看的。但是....所有人的图表都是这样做,怎能突出你的图表个性?还可以更好看?看看下面的水滴图表:

11820
来自专栏腾讯社交用户体验设计

经验分享:多屏复杂动画CSS技巧三则 - 腾讯ISUX

31020
来自专栏十月梦想

HTML5音频audio和视频video用法解析

    html5新增加了2个媒体标签音频(audio)和视频(video),这样就更便于我们进行媒体化元素的内容开发网页!!!

56730
来自专栏企鹅号快讯

浅谈Web自适应

前言 ? 随着移动设备的普及,移动web在前端工程师们的工作中占有越来越重要的位置。移动设备更新速度频繁,手机厂商繁多,导致的问题是每一台机器的屏幕宽度和分辨率...

39180

扫码关注云+社区

领取腾讯云代金券