欢迎您光临深圳塔灯网络科技有限公司！
电话图标 余先生：13699882642

网站百科

为您解码网站建设的点点滴滴

首页  >   > 网站建设知识 > 建站知识 > 企业建站知识
企业建站知识 推广知识 小程序 微信营销 APP开发 前端设计 MindManager 开发语言 自媒体

pc端网页自适应各版本移动端屏幕大小

发表日期：2019-09 文章编辑：小灯 浏览次数：821

之前做了一个小项目，打包为app后在大部分安卓机上都可以完美运行，只有魅族的一款型号机产生了屏幕适应问题。在网上广泛搜索后终于找到了解决办法：
meta标签起决定性作用
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />

在网页的<head>中增加这句话，可以让网页的宽度自动适应手机屏幕的宽度。

<meta> 元素可提供有关页面的元信息。

<meta> 标签位于文档的头部，不包含任何内容。

<meta> 标签的属性定义了与文档相关联的名称/值对。

width=device-width ：表示宽度是设备屏幕的宽度 
initial-scale=1：表示初始的缩放比例 
minimum-scale=1：表示最小的缩放比例 
maximum-scale=1：表示最大的缩放比例 
user-scalable=no：表示用户是否可以调整缩放比例


！！！切记： 利用这种方法来使网页自适应手机屏幕之后，在页面布局中，css定义宽度的时候最好不要使用具体的值（例如xx px），而是应该使用百分比（例 50%）。


还有另一种方法是利用 js 代码来使其适应屏幕大小，但是我用的效果并不太好委屈

function bodyScale() {var devicewidth = document.documentElement.clientWidth;var scale = devicewidth / 页面宽度;document.body.style.zoom = scale;}window.onload = window.onresize = function () {bodyScale();};

都是在各位前辈的博客学到的，真的很有用处，js 那个还要继续加固练习。


本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://dengtar.com/20960.html
上一篇：webview网页自适应手机屏幕大小 下一篇：jQuery 阻止表单重复提交
相关企业建站知识
最新网站建设案例
 八年  行业经验

多一份参考，总有益处

联系深圳网站公司塔灯网络，免费获得网站建设方案及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

业务热线：余经理：13699882642

在线咨询 提交需求

Copyright ? 2013-2018 Tadeng NetWork Technology Co., LTD. All Rights Reserved.