Question

就移动设备而言，我是一个新手。无论如何，我创建了一个网页（仍在建设中），并在现有的wp主题govpress上实现它（是的，我知道它可能不是最实用的方法来实现，但我的编码技能是最简单的）。现在我无法让它与移动设备正常工作。我还没有找到使它像它一样运行的代码。因此，在移动设备上，它似乎将页面缩放到设备的屏幕宽度分辨率（？）。背景和标题div（全宽）也缩放到设备屏幕宽度。即使我缩小它也不会扩大bg和标题div。它是在某个地方编码的这种行为的主题还是它在css中的某个地方..！？ Heeeelp，拜托!!!

在http://www.lifespectrum.eu上找到该网站继承人我的css：http://lifespectrum.eu/wp-content/themes/govpress/style.css （虽然那里有很多捶打）请问你是否需要其他任何东西！提前谢谢！

Answer 1

通过媒体查询在css文件中完成缩放。相应地调整这些语句以使背景/标题符合您的要求：

@media screen and (max-width: 840px)
@media screen and (max-device-width: 680px)
@media screen and (max-width: 480px)

Answer 2

移动行为是CSS。您最后的CSS代码@media screen and (max-device-width: 680px)正在执行此操作。只需使桌面窗口屏幕变得越来越小，您就可以轻松检查自己的响应式样式。通过这样做，您可以轻松地看到您的徽标标题响应，但您的身体内容保持不变。

我会检查正文上的元素并执行与.logo相同的操作。您可以通过使用chrome（右键单击＆amp; inspect元素）在inspect元素中编辑来预览更改，只是为了查看怎么样。

Answer 3

看起来你的背景/标题是唯一有css编写的元素，用于在列出的媒体查询中调整它们的大小。

内容区域包含您在不同宽度的媒体查询中调整设置所需的类。例如，您将css中设置的.topwhite和.top div设置为静态宽度810px。一旦窗口宽度小于810px，那将为您提供令人讨厌的水平滚动条。一个快速解决方法是将它们设置为

var presupuestoControlers = angular.module('presupuestoControllers', []);

presupuestoControlers.controller('audClienteCtrl', ['$scope', 'Cliente',
    function($scope, Cliente){


    $scope.save = function(cli)
    {
        Cliente.addCliente({nombre_cliente: cli.nombre_cliente}, function(response){
            $scope.mes = response
        }); 
    }
}]);

这样它们最多可以达到您设置的原始大小，但随着设备或窗口宽度变小，这些div的大小将随之缩小。这只会帮助您使用容器，您还必须为内容添加新的CSS设置。但你可以使用相同的想法。

Answer 4

您可能需要实现viewport mets标记。见https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

移动设备上的站点缩放

4 个答案: