PHP melaksanakan navigasi adaptif

Memandangkan peranti mudah alih seperti telefon mudah alih dan tablet menjadi semakin biasa dalam kehidupan seharian orang ramai, cara menyediakan pengalaman menyemak imbas web yang mesra untuk peranti skrin kecil ini telah menjadi masalah yang perlu dihadapi oleh pembangun. Artikel ini akan memperkenalkan cara melaksanakan navigasi adaptif menggunakan PHP untuk memberikan pengalaman pengguna yang lebih baik pada saiz skrin yang berbeza.

1. Idea untuk mereka bentuk navigasi adaptif

Dalam reka bentuk web moden, untuk menyesuaikan diri dengan pelbagai saiz terminal, orang biasanya menggunakan kaedah reka bentuk web responsif (Reka Bentuk Web Responsif). Ringkasnya, ia menggunakan pertanyaan media CSS untuk menyesuaikan diri dengan saiz peranti yang berbeza, dengan itu membawa pengalaman pengguna yang lebih mesra. Untuk bar navigasi, kita boleh menggunakan susun atur mendatar dan menegak mengikut lebar skrin, seperti yang ditunjukkan dalam rajah di bawah:

Apabila lebar skrin lebih besar, susun atur mendatar digunakan dan setiap pautan navigasi disusun secara mendatar mengikut giliran; Apabila lebar skrin kecil, susun atur menegak diguna pakai, dan setiap pautan navigasi disusun secara menegak. Ini bukan sahaja memudahkan pengguna untuk beroperasi pada skrin kecil, tetapi juga mengelakkan garis putus apabila susunan mendatar terlalu panjang.

Seterusnya, kami akan melaksanakan navigasi penyesuaian melalui kod PHP.

2. PHP melaksanakan navigasi adaptif

Apabila mereka bentuk navigasi untuk halaman web, kami biasanya menyimpan pautan navigasi dalam tatasusunan atau pangkalan data, supaya halaman itu boleh dikemas kini dengan mudah. Dalam PHP, kita boleh mendapatkan tatasusunan pautan navigasi melalui kod berikut:

$nav_links = array(
    '首页' => 'index.php',
    '新闻' => 'news.php',
    '产品' => 'product.php',
    '关于我们' => 'about.php'
);

Kemudian, kita boleh menggunakan CSS untuk menggayakan bar navigasi pada lebar yang berbeza, seperti yang ditunjukkan di bawah:

/* 导航栏样式 */
nav {
    margin: 0;
    padding: 0;
}
/* 水平布局 */
@media screen and (min-width: 480px) {
    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: center;
    }
    nav li {
        padding: 0 10px;
    }
}
/* 垂直布局 */
@media screen and (max-width: 479px) {
    nav ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    nav li {
        margin: 10px 0;
    }
}

Teruskan Seterusnya , kami menggunakan kod PHP untuk memilih susun atur bar navigasi yang sesuai berdasarkan lebar skrin. Pelaksanaan khusus adalah seperti berikut:

<?php
    $nav_links = array(
        '首页' => 'index.php',
        '新闻' => 'news.php',
        '产品' => 'product.php',
        '关于我们' => 'about.php'
    );
    $screen_width = $_SERVER['HTTP_USER_AGENT'] ? (int) $_SERVER['HTTP_USER_AGENT'] : null;
    if ($screen_width && $screen_width < 480) {
        echo '<nav><ul>';
        foreach ($nav_links as $name => $link) {
            echo "<li><a href='$link'>$name</a></li>";
        }
        echo '</ul></nav>';
    } else {
        echo '<nav><ul>';
        foreach ($nav_links as $name => $link) {
            echo "<li><a href='$link'>$name</a></li>";
        }
        echo '</ul></nav>';
    }
?>

Kod ini mula-mula memperoleh lebar skrin peranti semasa, dan kemudian memilih reka letak navigasi yang berbeza untuk pemaparan berdasarkan lebar skrin.

Adalah penting untuk ambil perhatian bahawa untuk mendapatkan lebar skrin peranti dalam PHP, kami menggunakan pembolehubah $_SERVER['HTTP_USER_AGENT']. Pembolehubah ini mengandungi rentetan Ejen Pengguna, yang mengandungi maklumat tentang peranti dan penyemak imbas pengguna. Walaupun kaedah ini tidak begitu tepat, ia memenuhi keperluan kita dalam kebanyakan kes.

3. Ringkasan

Melalui pengenalan artikel ini, pembaca boleh mempelajari kaedah menggunakan PHP untuk melaksanakan navigasi adaptif. Menggunakan kaedah ini boleh menjadikan tapak web memaparkan reka letak bar navigasi yang lebih mesra pada peranti dengan saiz yang berbeza, meningkatkan pengalaman pengguna. Sudah tentu, untuk mencapai reka bentuk responsif yang lebih sempurna, pembaca juga boleh mengetahui lebih lanjut tentang pertanyaan media CSS, JavaScript dan teknologi lain yang berkaitan untuk meningkatkan lagi kemahiran pembangunan mereka.

Atas ialah kandungan terperinci PHP melaksanakan navigasi adaptif. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!