根据不同分辨率显示相同web页面
2017-12-14 17:16
239 查看
<script> changeSize(); window.onresize = function() { changeSize(); }; function changeSize() { let newWidth = Number(window.innerWidth); let newHeight = Number(window.innerHeight); var appBox = document.querySelector('.container'); if(newWidth > 1920) { // appBox.style.left = (newWidth - 1920) / 2 + 'px'; // //appBox.style.top = (newHeight - 1080)/2 + 'px'; // appBox.style.top = ((newWidth / 1920 - 1) * 1080) / 2 + 'px'; appBox.style.transformOrigin = '0 0'; appBox.style.transform = 'scale(' + newWidth / 1920 + ',' + newWidth / 1920 + ')'; appBox.style.width = (1920 / newWidth) * 100 + '%'; appBox.style.height = (1080 / newHeight) * 100 + '%'; } if(newWidth <= 1920) { appBox.style.transformOrigin = '0 0'; appBox.style.transform = 'scale(' + newWidth / 1920 + ',' + newWidth / 1920 + ')'; appBox.style.width = (1920 / newWidth) * 100 + '%'; appBox.style.height = (1080 / newHeight) * 100 + '%'; } } </script>
相关文章推荐
- Web页面根据不同的分辨率显示不同的图片
- Web页面根据不同的分辨率显示不同的图片
- 10.10、spring boot的web应用——定义错误页面(2)——通过实现ErrorPageRegistrar根据不同的错误类型显示网页
- 小程序web-view动态显示h5页面,根据不同条件显示不同网页——微信web-view高级用法13
- Ngixn根据手机端与电脑端设备相同地址显示不同页面内容
- Asp.net web 根据不同的用户权限显示不同的菜单
- 解决qt在相同分辨率不同宽度的屏幕下字体显示位置不一样的问题
- web 页面如何动态适应不同的页面分辨率
- CSS媒体查询,CSS根据不同的分辨率显示不同的样式
- js总结6(菜单根据页面单位类别的不同而显示不同)
- JSP页面根据后台传值不同显示不同内容
- Webview--如何让加载进来的页面自适应手机屏幕分辨率居中显示
- Webview--如何让加载进来的页面自适应手机屏幕分辨率居中显示
- Selenium2学习-024-WebUI自动化实战实例-022-网站不同分辨率下页面样式展示兼容性问题解决方案 -- 设置浏览器显示区域大小(无人值守,节约测试成本的福音,BOSS 最爱)
- 技术文章 | nginx lua 小项目:根据 user_agent 显示不同的页面_附带和 php 性能的对比
- Web页面输入框相同尺寸不同长度的问题
- 页面根据不同Url显示不同Title以及不同的Mete
- android linearLayout 根据不同的分辨率自动调整 显示大小
- 根据相同的ID,通过xml合并多行,并在页面里解码显示出来
- Webview--如何让加载进来的页面自适应手机屏幕分辨率居中显示