Question

我正在尝试为我的朋友兄弟完成一个网站，一切（几乎）都可以正常工作。

该站点使用中心容器构建，从左侧开始约15-20％的空间。

问题是，当您在iPhone或iPad中打开它时，网站会缩放，以便删除左侧的空间，文本将准确地从屏幕开始的位置开始。我希望我能解释这一点。

我是否有一种简单的方法可以仅针对移动设备进行更改？太糟糕了，我在手机设计方面没有任何经验..

提前致谢！

Answer 1

您使用百分比将容器移到左侧？

您确定没有使用CSS为容器提供固定的width和margin:0 auto;吗？然后将此元标记放入HTML网页的头部，以便手机正确对待它？

<meta name="viewport" content="width=device-width; initial-scale=1.0;maximum-scale=1.0;" />

因为据我所知，您使用的是margin:0 auto;居中方法。

给容器一些填充，例如padding:1em;，你应该没问题。：）

Answer 2

您可以通过查找设备参数

在页面标题中包含css

<style type="text/css" media="screen and (max-device-width: 480px)">
    /*for iphone only*/
</style>

或者另一种方法是仅为移动设备创建一个css文件mobile.css，并通过以下javascript包含此css： -

<script type="text/javascript">
    // checking if the device is iphone, ipod or ipad
    if ((navigator.userAgent.indexOf("iPad") > 0)
        || (navigator.userAgent.indexOf("iPod") > 0)
        || (navigator.userAgent.indexOf("iPhone") > 0)) {
        // including the css file
        document.write("<link href='mobile.css' rel='stylesheet' type='text/css' />");
    }
</script>

iPhone / iPad上的缩放比例不同

2 个答案: