手机整屏显示数据php,JavaScript实现移动端页面按手机屏幕分辨率自动缩放示例...
这篇文章主要介绍了移动端页面按手机屏幕分辨率自动缩放的js代码,通过阻止浏览器的默认行为各方面分析缩放的功能实现,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
手机的屏幕有大有小,移动web最好做成响应式布局,也就是自适应屏幕,没有固定宽高,这样的话,在所有手机上都可以正常显示。关于移动端页面按手机屏幕分辨率自动缩放的js,先附上代码
var phoneWidth = parseInt(window.screen.width);
var phoneHeight = parseInt(window.screen.height);
var phoneScale = phoneWidth/750;//除以的值按手机的物理分辨率
var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)) {
var version = parseFloat(RegExp.$1);
// andriod 2.3
if (version > 2.3) {
document.write('');
// andriod 2.3以上
} else {
document.write('');
}
// 其他系统
} else {
document.write('');
}
做手机端页面最头疼的就是物理分辨率和逻辑分辨率的转换了,当拿到设计图的时候,图基本都是按物理分辨率来设计的,一般常用的为640(iphone5/5s)、750(iphone6/6s),而谷歌等浏览器采用小手机模式浏览页面的时候,上面的值为逻辑分辨率,调试的时候很难把控页面样式,在手机端的样式也会因此大乱,在页面头部加入以上一段js之后,在手机端就可以正常显示了,
var phoneScale = phoneWidth/750;
除以的为设计图设计的页面宽度,750是按iphone6来设计(根据自己使用需求来修改),即让页面的 放大比率=屏幕的逻辑分辨率/物理分辨率,从而达到适应手机的效果。
(注意,有时候页面加了这段代码在调试的时候,切记刷新,刷新过后就会按手机缩放比例显示)
概念解析:
phys.width:一般我们所指的宽度width即为phys.width,物理宽度(物理分辨率)
device-width:又称为css-width,设备宽度(逻辑分辨率)
其中我们可以获取phys.width通过document.documentElement.clientWidth;
而获取css-width通过 window.screen.width获取。
所以这里 phoneWidth(逻辑分辨率) = parseInt(window.screen.width);
如iphone6的phys.width为750px,而css-width为375px。
明白一个浏览器默认行为。
试想,浏览器如果把电脑端的980px的网页展现在宽度为750px的iphone6手机屏上,势必会放不下,手机端横向会出现滚动条,怎么阻止这种情况呢,很简单,浏览器默认一个虚拟窗口,不同浏览器有不同的虚拟窗口宽度的默认值如:safari iphone:980px;
opera:850px;
Andriod webkit:800px;
IE:974px;
然后会把这个980px虚拟窗口装进宽度为750px的iphone6中,当然这样的话必须缩放,这就是为什么在手机中展现电脑端页面没有出现横向滚动条,而且字迹明显变小的原因。initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale='+phoneScale+'
这段代码切记要指定 initial-scale=***,在安卓系统中,不指定默认的nitial-scale=***,只指定最小和最大缩放值,也可以正常显示,但是safari浏览器则会失效,对于宽度是100%的页面, 则显示为页面的30%左右的宽。target-densitydpi=device-dpi
WebKit内核默认按照160的DPI来排版。假如设备真实DPI是480,宽度是1080,在WebKit会按160DPI,360宽度来排版。排版结束后在放大到1080宽。
所以当取window.innerwidth之类的值的时候,取的是WebKit实际排版宽度360,而不是1080.
target-densitydpi=device-dpi可以强制内核以480DPI排版,使画面更精细,window.innerwidth也将为屏幕宽度1080.
但WebKit从去年开始取消了对target-densitydpi的支持。(所以现在不建议写该属性了)
想实现target-densitydpi=device-dpi的效果有什么方法?提交此次补丁的WebKit开发者说可以用responsive images 和 CSS device units来替代。
手机整屏显示数据php,JavaScript实现移动端页面按手机屏幕分辨率自动缩放示例...相关推荐
- jsp页面适应手机屏幕_JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码...
手机的屏幕有大有小,移动web最好做成响应式布局,也就是自适应屏幕,没有固定宽高,这样的话,在所有手机上都可以正常显示.关于移动端页面按手机屏幕分辨率自动缩放的js,先附上代码 var phoneWi ...
- 通过JS动态设置meta标签,根据手机屏幕分辨率自动缩放适配各手机(包括适配华为、oppo大屏幕手机、钉钉、微信)
JS动态添加meta标签,根据手机屏幕分辨率自动缩放适配各手机(包括适配华为.oppo大屏幕手机.钉钉.微信进入) 5月28晚上周四下班接了一个急活,一个面向国外的国际官方网站,三方适配+兼容.说是月 ...
- 移动端页面按手机屏幕分辨率自动缩放的js
1 <script> 2 var phoneWidth = parseInt(window.screen.width); 3 var phoneHeight = parse ...
- 手机整屏显示数据php,完美解决手机网页大背景不能铺完整个屏幕的超级代码
html,body{min-height:100%;} ============优化================ html{min-height:100%;} html,body{min-heig ...
- 关于移动端页面在手机调整字体大小后无法正常显示(已解决)
关于移动端页面在手机调整字体大小后内容适配的问题,作为新手我也刚好是第一次遇到, 已经完成的移动端页面,正常情况下在手机上的浏览器端和App端都可以正常显示,可当测 试把手机字体调大后,布局就忽然变乱 ...
- 手机拍照显示_最值得购买的4款5G手机,每款都有一技之长,有你在用的吗?
最值得购买的4款5G手机,每款都有一技之长,有你在用的吗? 第一款:iPhone12 iPhone12是不少果粉期待了很久的一款产品,最主要的原因就是这一代的产品它能够支持5G网络.而除此之外,iPh ...
- 前端移动端页面与手机尺寸和分辨率的关系
概念 英寸 1英寸 大概2.54cm 5.5英寸 指的是手机对角线 像素 . 一个屏幕都是由一个一个像素组建而成的,每个像素都对应一个小点.我们常见的 640*960 像素就说明了一个屏幕中包含了多少 ...
- 手机不显示网络信号连接到服务器是怎么回事,手机连接不上网络怎么办
现在很多人都使用手机进行上网,不管是wifi也好流量也罢,都是可以供电脑上网的好帮手,那么要是遇到手机连接不上网络的情况,该怎么办呢?下面是学习啦小编整理的手机连接不上网络的解决方法,供您参考. 手机 ...
- vue移动端页面调用手机拍照_vue实现PC端调用摄像头拍照、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式...
export default { () { return {} }, methods: { # // 压缩图片 and 旋转角度纠正 下方代码 # 需要自行去掉 个人只作为着色效果加上 compres ...
最新文章
- 不同分辨率下Apriltag识别精度测试
- 制作Windows Server 2008安装启动U盘
- Centos下修改启动项和网络配置
- OpenCV中OpponentColorDescriptorExtractor
- micropython开发idethonny_ESP32 Micropython开发利器Thonny IDE介绍
- gan简介_GAN简介
- Linux shell:shell 命令的返回值和输出
- 信息学奥赛一本通 1037:计算2的幂 | OpenJudge NOI 1.3 20
- mysql利用binlog删除数据库_MySQL数据库之mysql手动删除BINLOG的方法
- pythonexcel计算横列总和-在python中,如何在字典中找到值的总和?每个键都有多个值...
- 洛谷2501 BZOJ1801中国象棋题解
- CNKI 中国知网全文数据库账户密码免费入口
- 数字电路实验怎么接线视频讲解_220V电动葫芦实物接线图
- 关于过期更换ssl证书的相关问题
- c语言100道题 第二道 出租车计价
- 视频插帧—学习笔记(算法+配置+云服务+Google-Colab)
- 10个最常见的HTML5面试题
- sstream和strstream的区别
- 8款HTML5动画特效推荐源码
- 使用pd4ml 将html转换为pdf
热门文章
- [软件设置]安装了McAfee杀毒软件后,用Foxmail发送邮件总是显示“由于目标机器积极拒绝,无法连接”解决方案
- js三级地区选择插件,省市县级联下拉列表
- 戴尔(DELL)笔记本的型号解析
- SAP:不一样的2019?
- oracle rac v3500_Oracle RAC 基本概念及入门
- Mac related cmd
- Tv开发 Google 官方demo leanback遇到的问题
- 手机游戏地图绘制软件
- 列王的纷争服务器维护中,《cok列王的纷争》不忘初心,持续做玩家喜欢的列王!...
- Failed to load build-tools\xx\lib\dx.jar的解决方式