将网站扩展到移动设备

Question

我有一个网络应用程序,其中响应式布局不是移动设备的选项,所以我尝试使用视口缩放一点,但没有成功这样做.

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

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">');

我只是尝试了宽度,但结果不是理想的,我做错了吗？

Answer 1

我不确定你想要实现什么,但使用以下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

Answer 2

对我来说，我创建了一个 css-layout 文件，将它链接到我的 html 文件并查询每个宽度，或者您可以学习引导程序，您的网站将准备好移动而无需做我所做的事情（引导程序对我来说编辑 js 很痛苦）至于查询这就是我写出来的方式

在你的 html

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
user-scalable=no">

然后在你的 css 中

@media only screen and (device-width: 1280px),
only screen and (max-width:1280px) {
.css-element {
yourcsscode:;
}
   }

我只想写出来但是你想要你的网页的 css 然后构建像上面显示的尺寸也可以说你想要一个菜单​​栏出现你可以为主导航创建一个 css 然后使用 @media 然后更改 css为该导航使菜单栏出现。

还

.css-element{
display:block;
}

和

.css-element{
display:none;
}

查询时真的很有帮助