When designing web pages, design a set of pages for the mobile terminal and a set of pages for the PC terminal, and automatically select whether to use the mobile terminal page or the PC terminal page according to the device type.

Responsive design, that is, the mobile terminal and the PC terminal share the same HTML mode, and the programs and templates of the website are automatically adjusted according to the device type and screen size. I don't like this method, the reason is that the effect of various clients cannot be guaranteed well, and there are various complicated compatibility issues in it.
I like to write different patterns for different clients, avoiding some of the complexities of layout adaptation and style adjustment that may occur in responsive design

The advantages of writing HTML templates for mobile and PC separately include:

Fine-grained control: You can customize precise layouts and styles for different device types to meet different screen sizes and user needs.
Performance optimization: By loading specific templates and resources for different devices, page loading speed and performance can be improved because complex layout and style adjustments on the client side are not required.
User experience: Independent templates can provide a more optimized user experience according to the characteristics of each device, making users feel comfortable on both mobile and PC terminals.

The idea is as follows:
1. Use Django for web development.
2. Write a set of HTML templates for the mobile terminal and the PC terminal respectively. When it is detected that the request is from the mobile terminal, the page on the mobile terminal is displayed. When it is detected that the request is from the PC terminal, the page on the PC terminal is displayed.

Responsive design can be achieved by using Django for web development and writing a set of HTML templates for mobile and PC. Here are more detailed steps to help you realize this idea:

Create a Django project: First, create a new Django project using Django's command-line tools.
```
django-admin startproject projectname
```
Create Application: Create a new Django application in the project.
```
cd projectname
python manage.py startapp appname
```

Write HTML templates: In your application directory, create a folder named "templates", and create HTML template files for mobile and PC respectively in it. For example, "mobile_template.html" and "pc_template.html" could be created.

<!-- mobile_template.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Mobile Page</title>
    <!-- 移动端样式和meta标签 -->
</head>
<body>
    <!-- 移动端内容 -->
</body>
</html>

<!-- pc_template.html -->
<!DOCTYPE html>
<html>
<head>
    <title>PC Page</title>
    <!-- PC端样式 -->
</head>
<body>
    <!-- PC端内容 -->
</body>
</html>

Write Django views: In your application's views.py file, write view functions that determine which HTML template to use based on the type of device the user is accessing (such as User-Agent).

from django.shortcuts import render
from django.template import RequestContext

def my_view(request):
    if 'Mobile' in request.META['HTTP_USER_AGENT']:
        template_name = 'mobile_template.html'
    else:
        template_name = 'pc_template.html'
    
    return render(request, template_name)

Configure URL routing: In your application's urls.py file, associate view functions with URL paths.

from django.urls import path
from . import views

urlpatterns = [
    path('my-page/', views.my_view, name='my-view'),
]

Testing and debugging: run the Django development server and visit the URL on different devices to ensure that the page displays the correct content and style according to the device type.
Optimization: Optimize according to the test results to ensure that the page can be displayed and run well on various devices and screen sizes.

Through the above steps, you can use Django to create a website with responsive design, and automatically select different HTML templates according to the user's device type, so as to provide a user experience suitable for mobile and PC terminals.

Can you add another function, that is, add a "computer version" button on the mobile page, and when the user presses this button, it will switch to the PC page display.
Of course this functionality can be added! You can add a "computer version" button to the mobile page, and when the user clicks it, it will switch to the PC page display. Here are the steps to achieve this functionality:

Modify the mobile terminal template: In the HTML template of the mobile terminal, add a button element to switch to the PC terminal page.

<!-- mobile_template.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Mobile Page</title>
    <!-- 移动端样式和meta标签 -->
</head>
<body>
    <!-- 移动端内容 -->
    <button id="desktop-button">电脑版</button>
</body>
</html>

Write JavaScript: Use JavaScript to implement the click event of the button. When the user clicks the button, it will jump to the PC-side page.

<!-- mobile_template.html -->
<!DOCTYPE html>
<html>
<head>
    <title>Mobile Page</title>
    <!-- 移动端样式和meta标签 -->
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        
        
        var desktopButton = document.getElementById('desktop-button');
        desktopButton.addEventListener('click', function() {
        
        
            // 跳转到PC端页面
            window.location.href = "/desktop-page/";
        });
    });
    </script>
</head>
<body>
    <!-- 移动端内容 -->
    <button id="desktop-button">电脑版</button>
</body>
</html>

Add PC-side view and template: Create a new PC-side view and template to display PC-side content.

# 在views.py中
def pc_view(request):
    template_name = 'pc_template.html'
    return render(request, template_name)

# 在urls.py中
urlpatterns = [
    path('my-page/', views.my_view, name='my-view'),
    path('desktop-page/', views.pc_view, name='pc-view'),  # 添加PC端页面的URL
]

Testing and debugging: run the Django development server, click the "computer version" button on the mobile page to ensure that it can jump to the PC page display.

Through the above steps, you can add a button on the mobile page to allow users to switch to the PC page when needed, so as to achieve more user experience options. Please note that in actual projects, you may need to further optimize and adjust to ensure that this function can work properly in various situations.

When designing web pages, design a set of pages for the mobile terminal and a set of pages for the PC terminal, and automatically select whether to use the mobile terminal page or the PC terminal page according to the device type.

Guess you like