Question

我有一些代码可以确定您的屏幕分辨率，然后根据结果调整标题的大小。

如果它是1600x900，我们不想调整大小，我们希望将标题保留为1500x500。否则，我们将标题分别设置为100％。

但是。分辨率为1600x900时，标头将调整大小，代码不起作用，除非我回显了前面的代码，该代码在屏幕上显示了用户的屏幕分辨率。我实际上并不想显示该回显。

如果我进入并回显，然后删除回显，它将起作用，但是我需要它第一次起作用。因此，我想知道是否有某种方法可以在不实际打印或没有等效想法的情况下进行回显。

相关标头代码：

<!-- This is start of header code -->
<!-- All you need to do is put in the new header image and change site title like before -->
<?php
    session_start();
    if(isset($_SESSION['screen_width']) AND isset($_SESSION['screen_height']))
    {
        <!-- put a echo here for debugging -->
        'User resolution: ' . $_SESSION['screen_width'] . 'x' . $_SESSION['screen_height'];
    }
    else if(isset($_REQUEST['width']) AND isset($_REQUEST['height'])) 
    {
        $_SESSION['screen_width'] = $_REQUEST['width'];
        $_SESSION['screen_height'] = $_REQUEST['height'];
        header('Location: ' . $_SERVER['PHP_SELF']);
    } 
    else
    {
       <!-- put a echo here for debugging -->
       '<script type="text/javascript">window.location = "' . $_SERVER['PHP_SELF'] . '?width="+screen.width+"&height="+screen.height;</script>';
    }
?>

<!-- Note, putting those echos above will fix my site so that on 1600x900 it won't be 100% anymore. THEN removing echo will have the site the way I want it but this isn't ideal. I need it to work first time since other non-programmers will be working with this code -->

<?php if ($_SESSION['screen_width'] == 1600 && $_SESSION['screen_height'] == 900)
{
     //Don't change style, this is a resolution we want precise width on
    $width1 = "1500"."px";
    $height1 = "500"."px";
    //echo $width1;
    //echo $height1;
    //echo "Header won't change";
}
else
{
      //Change style, any other resolution we go for 100%
    $width1 = "100"."%";
    $height1 = "100"."%";
    //echo $width1;
    //echo $height1;
    //echo "Header will change";
}

$text = "<img src='https://i.imgur.com/AdK7a7u.png' style='width:$width1;height:$height1></center>";

preg_match_all("/<img.*>/",$text,$out);
foreach($out as $t1)
{
    foreach($t1 as $img)
    {
        preg_match("/.*height:(.*?);width:(.*?);.*/",$img,$out2);
        $height = $out2[1];
        $width = $out2[2];
        $text = str_replace($out2[0],str_replace("<img","<img width='" . $width1 . "' height='" . $height1 . "'",$out2[0]),$text);
    }
}
echo $text;
?>

在网站上运行的代码的图像：

Expected output for 1600x900

Actual output

What the echo looks like

Answer 1

您应该将CSS与媒体查询一起使用以实现此目的。例如，我将CSS类“ img”添加到我的图像标签中：

`package loginPackage;

import java.io.IOException;  
import java.io.PrintWriter;  

import javax.servlet.RequestDispatcher;  
import javax.servlet.ServletException;  
import javax.servlet.http.HttpServlet;  
import javax.servlet.http.HttpServletRequest;  
import javax.servlet.http.HttpServletResponse;  
import javax.servlet.http.HttpSession;

//@WebServlet(urlPatterns = {"/loginServlet"})  
public class loginServlet extends HttpServlet {  
public void doPost(HttpServletRequest request, HttpServletResponse response)  
        throws ServletException, IOException {  

    response.setContentType("text/html");  
    PrintWriter out = response.getWriter();  

    String n=request.getParameter("userName");                  
    String p=request.getParameter("userPass");  


    out.write("This is username: " + n);

    out.close();  
    }  
}  `

然后，在CSS中，您可以为不同的屏幕宽度等定义不同的规则：

<img class="img" src="http://www.sherv.net/cm/emoticons/trollface/success-troll-smiley-emoticon.png">

很显然，输入您需要的实际CSS规则只是我的示例。然后，如果将浏览器窗口拖动到其他大小，您将看到每条CSS规则都会自动启动，因为每条规则都具有优先权。

在https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

上阅读媒体查询

自动调整大小的标头似乎依赖于PHP Echo。我不希望回声显示任何东西。

1 个答案: