Question

功能

可在所有移动网络浏览器中查看的网络应用程序。因此，创建的Web应用程序需要具有移动性和跨浏览器兼容性和响应性。

已完成的工作：

我编辑了CSS以及包含在<meta name="viewport" author ="Luke" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

中

问题

经过测试，以下网络应用完全符合Google Chrome网络浏览器屏幕，唯一的小问题是原始显示屏已缩放，因此用户必须缩小

然而，当在其他浏览器上测试：iOS safari，firefox和android的本机Web应用程序IE时，问题显而易见。

问题的行为是显示器不适合所提到的浏览器屏幕，事实上它在屏幕的底部和右侧有很多空白区域。

因此，我如何将viewport设置为跨浏览器兼容，还是有另一种方式？

＆＃13;

 #my-memory-game {
   height: 100%;
   width: 100%;
   background-repeat: no-repeat;
 }
 body,
 html {
   height: 1920px;
   width: 1080px;
   padding: 0;
   margin: 0;
   overflow: hidden;
 }

＆＃13;

<meta name="viewport" author="ErnestLee" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

＆＃13;

Answer 1

主要问题是您使用height和width属性为屏幕设置静态尺寸：

html {
    height: 1920px;
    width: 1080px;
    padding: 0;
    margin: 0;
    overflow: hidden;
 }

您需要设置类似＆＃34; width = 100％＆＃34;任何灵活性。你基本上创建了一个固定宽度的网站，所以根本没有响应。

如果您正在寻找一种快速简便的方法来让所有浏览器都能运行，我就会进入CSS框架。有很多选择

你可以从像Kube这样的简单和准系统转向基金会。他们只是有很多内置功能来帮助你开始工作并确保它适用于所有浏览器。

我曾经是＆＃34;建立自己的＆＃34;但是与一个像基金会这样的事情相关的团队相比，创建一个CSS框架的1人乐队，你不会接近。

使跨浏览器移动兼容性

1 个答案: