个人中心
gpt4 book ai didi

İn desktop and mobile different presentation(İn台式机和移动设备不同的演示)

转载 作者：bug小助手 更新时间：2023-10-24 23:32:45 27 4
gpt4 key购买 nike



I made a web site but the presentation the page is different berween PC and smartphone.

我做了一个网站，但网页的呈现方式不同于PC和智能手机。


PC :

PC：


Site - PC

站点-PC


Smartphone :

智能手机：


Site - Smartphone

站点-智能手机


I would that show the same in the smartphone like PC. But in smartphone the buttons is not visible and the image is not in center. How can i do this?

我会在像PC这样的智能手机上表现出同样的情况。但在智能手机中，按钮是不可见的，图像也不在中心。我怎么能这样做呢？


All the code of the page :

页面的所有代码：


    <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="images/logo2.png">
    <title>Photo - T-Construction</title>

    <link rel="stylesheet" type="text/css" href="https://bootswatch.com/5/darkly/bootstrap.min.css" />

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

    <style type="text/css">
        .btnfleche{
            position: absolute;
            top: 50%;
        }
    </style>

</head>
<body style="background-color: black;height: 100%;width: 100%;">

    <button type="button" class="btn btn-success" onclick="window.location.href='realisation.php';" style="float: left;margin: 4%;color: black;">Retour</button>

    <?php

    $ids = intval($_GET["photoid"]);
    $idm = $ids-1;
    $idp = $ids+1;

    if($ids == null){
        header("location:realisation.php");
    }else{

        require 'dbcon.php';

        $getreal = $con -> prepare("select image from realisations where id = ?");
        $getreal -> bindParam(1, $ids);
        $getreal -> execute();
        $donnees = $getreal -> fetchall();
        if($donnees == null){
            header("location:realisation.php");
        }

        ?>

        <div style="width: 100%;height: 100%;"><center><img src="<?php echo($donnees[0]['image']); ?>" width="50%" height="50%" style="width: 50%;height: 50%;margin-top: 5%;margin-right: 5%;"></center>

        <?php

        $getrealm = $con -> prepare("select image from realisations where id = ?");
        $getrealm -> bindParam(1, $idm);
        $getrealm -> execute();
        $donneesm = $getrealm -> fetchall();
        if($donneesm != null){
            ?>
            <button type="button" class="btn btn-dark btnfleche" onclick="window.location.href='realphoto.php?photoid=<?php echo($idm); ?>';" style=" display: flex;align-items: center;float: left;color:red;background-color: black;"><h3><--</h3></button>
            <?php
        }

        $getrealp = $con -> prepare("select image from realisations where id = ?");
        $getrealp -> bindParam(1, $idp);
        $getrealp -> execute();
        $donneesp = $getrealp -> fetchall();
        if($donneesp != null){
            ?>
            <button type="button" class="btn btn-dark btnfleche" onclick="window.location.href='realphoto.php?photoid=<?php echo($idp); ?>';" style="display: flex;align-items: center;float: right;left: 95%;color:red;background-color: black;"><h3>--></h3></button></div>
            <?php
        }

    }

    ?>

</body>
</html>

I need your help.
Thanks.

我需要你的帮助。谢谢。


更多回答

Welcome to SO. I recommend checking out minimal reproducible example as most of that isn't actually needed to duplicate the problem. Also, your viewport seems complicated why not keep it simple like <meta name="viewport" content="width=device-width, initial-scale=1.0">?

欢迎来到So。我建议查看最小的可重现示例，因为大多数示例实际上并不需要重现问题。而且，您的视区看起来很复杂，为什么不像那样保持简单呢？

@imvain2 Thanks. The viewport is the same.

@imvain2谢谢。该视区是相同的。

In your else-block, you open a div, but you're closing it inside an if-statement. So if if($donneesp != null){ evaluates as false ($donneesp is null), then you never close the div.

在Else块中，您打开了一个div，但在if语句中关闭了它。因此，如果($donneesp！=NULL){的计算结果为FALSE($donneesp为NULL)，则永远不会关闭div。

I would post the generated HTML and not the PHP that makes it. The generated HTML/CSS will assist users in checking the HTML/CSS that is affecting the layout.

我会发布生成的HTML，而不是生成它的PHP。生成的html/css将帮助用户检查正在影响布局的html/css。

@M.Eriksson you are right. I changed the code. Nothing change.

@M.埃里克森，你说得对。我改了密码。什么都没变。

优秀答案推荐

To make this page responsive, we can use Bootstrap's grid system and classes, as well as some custom CSS. Here's a revised version of your code:

为了使该页面具有响应性，我们可以使用Bootstrap的网格系统和类，以及一些定制的CSS。以下是代码的修订版：


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" href="images/logo2.png">
    <title>Photo - T-Construction</title>

    <link rel="stylesheet" type="text/css" href="https://bootswatch.com/5/darkly/bootstrap.min.css" />

    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

    <style type="text/css">
        .btnfleche{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
        }
        .img-container {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
        }
        .img-container img {
            max-width: 100%;
            height: auto;
        }
    </style>

</head>
<body style="background-color: black;height: 100vh;width: 100%;">

    <button type="button" class="btn btn-success" onclick="window.location.href='realisation.php';" style="position: absolute; top: 4%; left: 4%; color: black;">Retour</button>

    <?php
    // Your PHP code here
    ?>

    <div class="img-container">
        <img src="<?php echo($donnees[0]['image']); ?>" alt="Image">
    </div>

    <?php
    // Your PHP code here
    ?>

    <button type="button" class="btn btn-dark btnfleche" style="left: 5%;" onclick="window.location.href='realphoto.php?photoid=<?php echo($idm); ?>';"><h3><--</h3></button>

    <?php
    // Your PHP code here
    ?>

    <button type="button" class="btn btn-dark btnfleche" style="right: 5%;" onclick="window.location.href='realphoto.php?photoid=<?php echo($idp); ?>';"><h3>--></h3></button>

    <?php
    // Your PHP code here
    ?>

</body>
</html>

Here are the changes to make:

以下是要做的更改：



  1. Add a transform: translateY(-50%); to the .btnfleche class to vertically center the buttons.



  2. Wrap the image in a div with a class of .img-container and added some CSS to center the image both vertically and horizontally.



  3. Change the height property in the body's inline style to 100vh to make it take up the full viewport height.



  4. Remove the float property from the buttons and positioned them absolutely at the left and right sides of the screen.



  5. Add a max-width: 100%; and height: auto; to the image to make it responsive.



  6. Move the "Retour" button to the top left corner of the screen using absolute positioning.




Remember to replace the <?php // Your PHP code here ?> placeholders with your actual PHP code. I removed as it was irrelevant to the mobile presentation.

记得替换<？php //你的PHP代码在这里？>占位符与实际的PHP代码。我删除了它，因为它与移动演示无关。


更多回答

27 4 0
文章推荐： Need to find SQL results based on grouping of single column to find if there is any different value for columns(需要根据单个列的分组来查找SQL结果，以查找列是否有任何不同的值)
文章推荐： WooCommerce - change the placement of Attribute on single product page(WooCommerce-更改单一产品页面上属性的位置)
文章推荐： SQL Query - Insert values from two columns in another table into one column(SQL查询-将另一个表中两列的值插入到一列中)
文章推荐： One Tap Sign in - Activity Result with Jetpack Compose(一键登录-Jetpack Compose的活动结果)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com