使跨浏览器移动兼容性

Question

功能：

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

做了什么：

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

问题

经过测试，以下 Web 应用程序非常适合 Google Chrome 网络浏览器屏幕，唯一的小问题是原始显示被缩放，因此用户必须缩小

但是，当在其他浏览器上测试时：iOS safari、firefox 和 android 的原生 Web 应用程序 IE，问题很明显。

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

因此，我如何将viewport 设置为跨浏览器兼容或有其他方法？

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

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

Answer 1

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

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

您需要设置诸如“width=100%”之类的东西以获得任何灵活性。你基本上是在创建一个固定宽度的网站，所以根本没有响应。

如果您正在寻找一种快速简便的方法来让内容在所有浏览器中都能正常工作，我会选择 CSS 框架。有很多可供选择

您可以从 Kube 之类的简单准系统转到 Foundation。他们刚刚拥有许多内置功能来帮助您开始并确保它适用于所有浏览器。

我曾经是“构建自己的”的倡导者，但与从事基础等工作的团队相比，我是一个创建 CSS 框架的单人乐队，你不会接近。