Question

因此，我目前有一个正在运行的实时聊天应用程序。问题是，在笔记本电脑屏幕上，它看起来像是https://pasteboard.co/IEHrCyL.png，而在电话上看起来是：https://pasteboard.co/IEHs2uB.png 我要制作一个类似于WhatsApp的移动版本：我们有联系人列表，然后选择一个，然后显示对话。要返回联系人列表，请按“返回”按钮。关于如何实现这一目标的任何想法？

当前代码是这样的（尽管自从我正在寻找一个想法以来，我认为它并没有真正的用处）：

<?php 
session_start();
?>
<!DOCTYPE html>
<html>
<head>
<link href="css/style.css" rel="stylesheet" id="bootstrap-css">
<script src="js/chat.js"></script>
<style>
.modal-dialog {
    width: 400px;
    margin: 30px auto;  
}
</style>
</head>
<body>
<div class="container">     
        <div class="chat">  
            <div id="frame">        
                <div id="sidepanel">
                    <div id="profile">
                    <?php
                    include ('Chat.php');
                    $chat = new Chat();
                    $loggedUser = $chat->getUserDetails($_SESSION['userid']);
                    echo '<div class="wrap">';
                    $currentSession = '';
                    foreach ($loggedUser as $user) {
                        $currentSession = $user['current_session'];
                        echo '<img id="profile-img" src="userpics/'.$user['avatar'].'" class="online" alt="" />
                    }
                    echo '</div>';
                    ?>
                    </div>
                    <div id="contacts"> 
                    <?php
                    echo '<ul>';
                    $chatUsers = $chat->chatUsers($_SESSION['userid']);
                    foreach ($chatUsers as $user) {
                        $status = 'offline';                        
                        if($user['online']) {
                            $status = 'online';
                        }
                        $activeUser = '';
                        if($user['userid'] == $currentSession) {
                            $activeUser = "active";
                        }
                        echo '<li id="'.$user['userid'].'" class="contact '.$activeUser.'" data-touserid="'.$user['userid'].'" data-tousername="'.$user['username'].'">';
                        echo '<div class="wrap">';
                        echo '<span id="status_'.$user['userid'].'" class="contact-status '.$status.'"></span>';
                        echo '<img src="userpics/'.$user['avatar'].'" alt="" />';
                        echo '<div class="meta">';
                        echo '<p class="name">'.$user['username'].'<span id="unread_'.$user['userid'].'" class="unread">'.$chat->getUnreadMessageCount($user['userid'], $_SESSION['userid']).'</span></p>';
                        echo '<p class="preview"><span id="isTyping_'.$user['userid'].'" class="isTyping"></span></p>';
                        echo '</div>';
                        echo '</div>';
                        echo '</li>'; 
                    }
                    echo '</ul>';
                    ?>
                    </div>
                </div>          
                <div class="content" id="content"> 
                    <div class="contact-profile" id="userSection">  
                    <?php
                    $userDetails = $chat->getUserDetails($currentSession);
                    foreach ($userDetails as $user) {                                       
                        echo '<img src="userpics/'.$user['avatar'].'" alt="" />';
                            echo '<p>'.$user['username'].'</p>';
                    }   
                    ?>                      
                    </div>
                    <div class="messages" id="conversation">        
                    <?php
                    echo $chat->getUserChat($_SESSION['userid'], $currentSession);                  
                    ?>
                    </div>
                    <div class="message-input" id="replySection">               
                        <div class="message-input" id="replyContainer">
                            <div class="wrap">
                                <input type="text" class="chatMessage" id="chatMessage<?php echo $currentSession; ?>" placeholder="Write your message..." />
                                <button class="submit chatButton" id="chatButton<?php echo $currentSession; ?>"><i class="fa fa-paper-plane" aria-hidden="true"></i></button>   
                            </div>
                        </div>                  
                    </div>
                </div>
            </div>
        </div>
</div>  
</body>
</html>

Answer 1

也许可以在CSS中使用@media查询来获取有关移动设备的正确视图。您可以设置不同屏幕宽度的位置。阅读一些有关RWD的信息，可能会有所帮助。

响应式即时聊天

1 个答案: