javascript - 实现跨浏览器移动兼容性

Question

功能:

可在所有移动网络浏览器中查看的网络应用程序。因此，创建的网络应用程序需要与移动设备和跨浏览器兼容并且响应迅速。

已完成的工作:

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

问题

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

但是，当在其他浏览器上测试时:iOS safari、firefox 和 android 的 native 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

主要问题是您使用高度和宽度属性为屏幕设置静态尺寸:

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

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

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

您可以从像 Kube 这样的简单准系统过渡到 Foundation。他们刚刚获得了许多内置功能来帮助您开始并确保它适用于所有浏览器。

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