html – 将网站扩展到移动设备

前端之家收集整理的这篇文章主要介绍了html – 将网站扩展到移动设备前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有一个网络应用程序,其中响应式布局不是移动设备的选项,所以我尝试使用视口缩放一点,但没有成功这样做.

页面大小为1280×720所以在小屏幕上它应该缩小,在较大的屏幕上放大:

var scale = $(window).width() / 1280;

$('head').append('<Meta name="viewport" content="width=device-width,height=device-height,initial-scale=' + scale + ',maximum-scale=' + scale + ',user-scalable=0">');

我只尝试过这个宽度,但结果不是理想的,我做错了吗?

解决方法

我不确定你想要实现什么,但使用以下html
<Meta name="viewport" content="width=1280,initial-scale=1">

以及JS

var siteWidth = 1280;
var scale = screen.width /siteWidth

document.querySelector('Meta[name="viewport"]').setAttribute('content','width='+siteWidth+',initial-scale='+scale+'');

您应该能够在移动设备上显示初始放大或缩小的页面.你必须检查设备是否在纵向.对于横向,您需要使用screen.height而不是screen.width

猜你在找的HTML相关文章