iPhone / iPad上的缩放比例不同

问题描述

| 我正在尝试为我的朋友兄弟完成一个站点，所有（几乎）工作都很好。 该站点由一个居中的容器构建，距离左侧大约15-20％的空间。 问题在于，当您在iPhone或iPad上打开该网站时，会缩放该网站的位置，以便删除左侧的空间，从而使文本恰好在屏幕开始的位置开始。希望我能解释这个权利。 是否有一种简单的方法可以仅针对移动设备更改此设置？太糟糕了，我在手机设计方面没有任何经验。 提前致谢！     

解决方法

您使用百分比将容器向左移动？ 您确定没有使用CSS给容器指定固定的

width

和

margin:0 auto;

吗？ 然后将这个meta标签放入HTML网页的标题中，以便电话将其正确处理？

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

因为据我所知，您正在使用

margin:0 auto;

居中方法。 给容器填充一些填充物，例如

padding:1em;

，就可以了。 :)     ,您可以通过查找页面的设备参数在页面的标题中包含css

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

或另一种方法是仅为移动设备创建一个css文件mobile.css，并通过以下javascript将其包括在内：-

<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>