将网站扩展到移动设备 [英] Scale website to mobile devices

问题描述

我有一个Web应用程序，其中响应式布局不是移动设备的选项，因此我尝试使用视口进行缩放，但是这样做没有成功.

I have a web app where responsive layout is not an option for mobile devices, so I tried playing with the viewport scaling a bit but had no success in doing so.

页面大小为1280x720，因此在小屏幕上应将其缩小，在大屏幕上应将其放大:

Page size is 1280x720 so on small screens it should be zoom out and on larger ones zoomed in:

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

我只尝试过这种宽度，但是结果不是想要的，我做错了吗?

I've only tried this for width but the result is not the desired one, am I doing something wrong?

推荐答案

我不确定您要实现的目标，但是使用以下html

I am not sure exactly what you are trying to achieve, but with the following 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

you should be able to show the page initial zoomed in or out on mobile devices. You would have to check the device was in portrait. For landscape you would need to use screen.height as opposed to screen.width

这篇关于将网站扩展到移动设备的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！