NgSysV.Reka Bentuk Responsif/Adaptif

Siri siaran ini diindeks di NgateSystems.com. Anda akan temui kemudahan carian kata kunci yang sangat berguna di sana juga.

Semakan terakhir: Nov '24

1. Pengenalan

Siaran 4.2 mendedahkan bahawa jika anda mahu apl web anda dipaparkan pada carian web, anda mesti memastikan bahawa:

• Apl web anda berfungsi dengan baik apabila dilihat pada skrin kecil telefon mudah alih dan
• Semua kandungan yang anda mahu diindeks oleh enjin carian boleh dilihat pada versi mudah alih.

Jika perisian anda ditujukan terutamanya untuk pengguna desktop, ini adalah gangguan yang besar - tetapi itulah kehidupan. Mari lihat bagaimana anda boleh menangani masalah itu secara sistematik.

2. Reka bentuk responsif menggunakan Tailwind

Reka bentuk responsif menggunakan keupayaan penggayaan CSS "dibakar dalam" untuk menguji lebar peranti paparan dan melaraskan pemformatan dengan sewajarnya. Ini semua berlaku secara automatik dalam penyemak imbas - tetapi anda masih perlu memberikan arahan yang jelas tentang perkara yang akan berlaku pada setiap "titik putus" (lebar skrin di mana gaya khusus lebar baharu akan digunakan).

Penggayaan CSS standard yang anda gunakan melalui siri ini setakat ini mencapai kesan penyesuaian ini dengan menggunakan teknik yang dipanggil "pertanyaan media". Tetapi dalam siaran ini, saya akan memperkenalkan anda kepada "perpustakaan terbuka" yang dipanggil Tailwind. Ini dibuat khusus untuk penggayaan responsif dan mempunyai banyak kelebihan tambahan.

Berikut ialah contoh penggayaan Tailwind yang mengehadkan tajuk berpusat kepada 95% lebar skrin pada skrin sehingga 768px lebar. Di atas lebar ini, tajuk berpusat dihadkan kepada 60% daripada lebar skrin:

<h1>



</h1><p>Previously in this series, you've seen styles applied to HTML elements like </p><p> by adding>

</p><p>The essence of Tailwind is that it provides a system of single-purpose "utility classes", each of which applies a specific set of styles to an element. The class names are chosen judiciously to provide a meaningful and practical expression of styling intentions. The example below styles a </p><p> element with 4rem padding on all four sides and a  background color of light gray.<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>Here, in bg-blue-500, bg says that this is a background style, blue sets the background colour to blue and 500 sets the colour "intensity" to a mid-value on a scale of 100 (light) to 900 (dark).</p>

<p>This is fine in its way, but the system may only become of interest to you when I tell you that you can make the tailwind utility classes responsive by simply adding a prefix to the style.</p>

<p>Tailwind recognizes the following screen-width "breakpoints":</p>

<div><table>
<thead>
<tr>
<th>Prefix</th>
<th>Screen Size</th>
<th>Minimum Width</th>
</tr>
</thead>
<tbody>
<tr>
<td>sm</td>
<td>Small devices</td>
<td>640px</td>
</tr>
<tr>
<td>md</td>
<td>Medium devices</td>
<td>768px</td>
</tr>
<tr>
<td>lg</td>
<td>Large devices</td>
<td>1024px</td>
</tr>
<tr>
<td>xl</td>
<td>Extra large devices</td>
<td>1280px</td>
</tr>
<tr>
<td>2xl</td>
<td>2x Extra large devices</td>
<td>1536px</td>
</tr>
</tbody>
</table></div>

<p>A style class such as "bg-gray-200" might thus be made to apply only to screens larger than 640px by specifying it as "sm:bg-gray-200".</p>

<p>The "This div has padding on all sides." example above could thus be made to display its paragraph with a blue background on screens with a maximum width of 640px and green on screens larger than this by styling it as follows:<br>
</p>

<pre class="brush:php;toolbar:false"><p>



</p><p>Because classes to the right take precedence, this makes the default background blue and overrides this with green when the screen is large enough. </p>

<p>For a fuller account of the Tailwind system and instructions on how to istall this in your project please see the Tailwind Website.</p>

<h3>
  
  
  3. Adaptive design for Server-side rendered webapps
</h3>

<p>Responsive design won't help you achieve more drastic effects where the desktop and mobile versions of a webapp are seriously different. Whereas a <strong>responsive design</strong> adjusts a standard pattern"fluidly" to accommodate different screen sizes, an <strong>adaptive</strong> design is prepared to give screen widths tailor-made solutions. </p>

<p>Expanding on the "tailoring" theme, you might think of responsive design as creating a single suit made of stretchable fabric that fits anyone. By contrast, adaptive design is like creating multiple tailored suits for different body types.</p>

<p>So if, for example, you felt that the mobile customers for your webapp were completely different from your desktop fans, you might want to give each community a tailor-made design (while delivering both under the same URL). </p>

<p>Conceptually, the obvious way to express this arrangement would be a displayIsMobile boolean guiding the display of MobileLayout and DesktopLayout components, as follows:<br>
</p>

<pre class="brush:php;toolbar:false">{#if displayIsMobile}
  <mobilelayout></mobilelayout>
{:else}
  <desktoplayout></desktoplayout>
{/if}

Tetapi kini anda akan bertanya "Bagaimanakah boolean displayIsMobile ini dimulakan?"

Apabila pelayan menerima permintaan penyemak imbas untuk myURL/myPage, perkara pertama yang dijalankan biasanya adalah fungsi load() dalam fail page.server.js yang dijalankan sebelah pelayan untuk menyediakan data awal untuk halaman. Apabila page.svelte untuk myPage - juga menjalankan bahagian pelayan - menerima data ini, ia akan mahu melakukan pemaparan awal bahagian "templat"nya dan menghantar blok HTML kembali ke penyemak imbas. Tetapi untuk melakukan ini, ia memerlukan nilai untuk displayIsMobile.

Jika anda menjalankan "sebelah pelanggan" maka jawapannya adalah mudah - gunakan objek "tetingkap" untuk memeriksa window.width dan tetapkan displayIsMobile dengan sewajarnya. Tetapi dalam kes ini, baik page.server.js mahupun page.svelte, yang menjalankan bahagian pelayan seperti yang mereka lakukan, tidak boleh menyoal secara langsung klien.

Satu pilihan mungkin ialah memilih nilai lalai yang sesuai untuk displayIsMobile dan mengembalikan paparan lalai. Anda kemudian boleh menggunakan fungsi onMount() pada klien untuk memeriksa sifat tetingkapnya dan memaparkan semula paparan lalai dengan lebih sesuai. Walau bagaimanapun, dua akibat akan berlaku:

• pemarahan semula paparan awal akan menghasilkan kesan "kerlipan" yang tidak menyenangkan pada peranti klien apabila setiap halaman dimulakan dan kemudian dipaparkan semula.
• SEO mungkin akan rosak teruk kerana perangkak web (yang mungkin tidak selalu melaksanakan JavaScript) mungkin tidak melihat kandungan yang betul.

Jadi, jika anda ingin melakukan tugas ini dengan betul, anda telah mempunyai untuk mencari cara menetapkan paparanisMudah alih dengan sewajarnya pada pelayan. Dengan cara ini anda akan menghantar halaman yang dipaparkan sepenuhnya kepada pelanggan secepat mungkin, mengoptimumkan prestasi dan SEO.

Jika anda telah membaca Siaran 3.5, anda akan ingat bahawa "pengepala" yang mengiringi permintaan pelayan boleh digunakan untuk menghantar maklumat yang berguna. Mungkinkah pengepala untuk permintaan penyemak imbas untuk halaman myURL/myPage mengatakan sesuatu yang berguna?

Syukurlah, jawapannya ialah "ya - mereka lakukan". Contohnya, pengepala ejen pengguna permintaan penyemak imbas termasuk komponen "Enjin dan Penyemak Imbas" yang mungkin digunakan untuk memberitahu anda bahawa permintaan itu datang daripada penyemak imbas mudah alih dan bukannya penyemak imbas desktop. Tetapi pengepala permintaan ejen pengguna berakar pada masa lalu pengkomputeran yang paling malap dan fungsinya telah bergelut untuk mengimbangi pelbagai minat bersaing.

Isu utama di sini ialah kebimbangan bahawa penerangan yang terlalu tepat tentang persekitaran pengguna (pengepala juga termasuk butiran penyemak imbas pengguna, jenis sistem pengendalian dan versi dll) boleh digunakan untuk mengenal pasti dan menjejak pengguna semasa mereka menavigasi web. Isu ini masih belum selesai.

Berikut ialah contoh "ejen pengguna":

<h1>



</h1><p>Previously in this series, you've seen styles applied to HTML elements like </p><p> by adding>

</p><p>The essence of Tailwind is that it provides a system of single-purpose "utility classes", each of which applies a specific set of styles to an element. The class names are chosen judiciously to provide a meaningful and practical expression of styling intentions. The example below styles a </p><p> element with 4rem padding on all four sides and a  background color of light gray.<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>Here, in bg-blue-500, bg says that this is a background style, blue sets the background colour to blue and 500 sets the colour "intensity" to a mid-value on a scale of 100 (light) to 900 (dark).</p>

<p>This is fine in its way, but the system may only become of interest to you when I tell you that you can make the tailwind utility classes responsive by simply adding a prefix to the style.</p>

<p>Tailwind recognizes the following screen-width "breakpoints":</p>

<div><table>
<thead>
<tr>
<th>Prefix</th>
<th>Screen Size</th>
<th>Minimum Width</th>
</tr>
</thead>
<tbody>
<tr>
<td>sm</td>
<td>Small devices</td>
<td>640px</td>
</tr>
<tr>
<td>md</td>
<td>Medium devices</td>
<td>768px</td>
</tr>
<tr>
<td>lg</td>
<td>Large devices</td>
<td>1024px</td>
</tr>
<tr>
<td>xl</td>
<td>Extra large devices</td>
<td>1280px</td>
</tr>
<tr>
<td>2xl</td>
<td>2x Extra large devices</td>
<td>1536px</td>
</tr>
</tbody>
</table></div>

<p>A style class such as "bg-gray-200" might thus be made to apply only to screens larger than 640px by specifying it as "sm:bg-gray-200".</p>

<p>The "This div has padding on all sides." example above could thus be made to display its paragraph with a blue background on screens with a maximum width of 640px and green on screens larger than this by styling it as follows:<br>
</p>

<pre class="brush:php;toolbar:false"><p>



</p><p>Because classes to the right take precedence, this makes the default background blue and overrides this with green when the screen is large enough. </p>

<p>For a fuller account of the Tailwind system and instructions on how to istall this in your project please see the Tailwind Website.</p>

<h3>
  
  
  3. Adaptive design for Server-side rendered webapps
</h3>

<p>Responsive design won't help you achieve more drastic effects where the desktop and mobile versions of a webapp are seriously different. Whereas a <strong>responsive design</strong> adjusts a standard pattern"fluidly" to accommodate different screen sizes, an <strong>adaptive</strong> design is prepared to give screen widths tailor-made solutions. </p>

<p>Expanding on the "tailoring" theme, you might think of responsive design as creating a single suit made of stretchable fabric that fits anyone. By contrast, adaptive design is like creating multiple tailored suits for different body types.</p>

<p>So if, for example, you felt that the mobile customers for your webapp were completely different from your desktop fans, you might want to give each community a tailor-made design (while delivering both under the same URL). </p>

<p>Conceptually, the obvious way to express this arrangement would be a displayIsMobile boolean guiding the display of MobileLayout and DesktopLayout components, as follows:<br>
</p>

<pre class="brush:php;toolbar:false">{#if displayIsMobile}
  <mobilelayout></mobilelayout>
{:else}
  <desktoplayout></desktoplayout>
{/if}

Saya rasa cukup mudah untuk melihat masalah yang anda akan hadapi untuk menghuraikan kekacauan ini!

Tetapi ada pilihan lain. Inisiatif baru-baru ini oleh Google mencadangkan bahawa penyemak imbas harus menyediakan pengepala baharu yang lebih mudah dipanggil sec-ch-ua-mobile. Ini mengandungi rentetan ringkas yang memberitahu anda sama ada penyemak imbas menjangkakan respons mudah alih atau tidak (lihat Sec-CH-UA-Mobile untuk butiran).

Walau bagaimanapun, sementara pengepala sec-ch-ua-mobile kini tersedia daripada Chrome dan Edge, penyemak imbas lain tidak semestinya menyokong inisiatif tersebut. Walau apa pun, pengepala sec-ch-ua-mobile tidak memberikan anda butiran yang mencukupi untuk memperhalusi respons anda dan menyampaikan, katakan, versi "tablet" yang jelas.

Ini semua sangat membosankan, tetapi mungkin cukup untuk anda membuat kesimpulan bahawa anda berbesar hati untuk menggunakan sec-ch-ua-mobile sebagai port panggilan pertama dan ejen pengguna sebagai sandaran. Dalam kes itu, berikut ialah beberapa kod untuk memberikan fail page.svelte pembolehubah displayIsMobile.

Mengelirukan ia bermula dengan jenis fail Svelte baharu yang dipanggil fail hooks.server.js.

Walaupun anda mungkin meletakkan kod untuk menetapkan displayIsMobile untuk fail page.svelte dalam fungsi load(), tidak setiap halaman page.svelte akan mempunyai salah satu daripada ini. Dan walaupun ia berlaku (dan anda sentiasa boleh mencipta satu, sudah tentu), anda akan mendapati anda perlu menduplikasi kod displayIsMobile dalam fungsi semua load().

Sebaliknya, fail hooks.server.js ialah sejenis fungsi load() "super" yang Svelte lancarkan untuk setiap permintaan yang diserahkan kepada pelayan. Ia berjalan sebelum sebarang aktiviti lain dilaksanakan. Ini menjadikannya tempat yang sesuai untuk memeriksa pengepala sec-ch-ua-mobile dan mencipta nilai untuk displayIsMobile.

Kod di bawah menunjukkan cara displayIsMobile mungkin dibina oleh fail hooks.server.js. Ia juga menunjukkan cara nilai ini mungkin disampaikan kembali ke fail page.svelte yang dijangka.

<h1>



</h1><p>Previously in this series, you've seen styles applied to HTML elements like </p><p> by adding>

</p><p>The essence of Tailwind is that it provides a system of single-purpose "utility classes", each of which applies a specific set of styles to an element. The class names are chosen judiciously to provide a meaningful and practical expression of styling intentions. The example below styles a </p><p> element with 4rem padding on all four sides and a  background color of light gray.<br>
</p>

<pre class="brush:php;toolbar:false"><div>



<p>Here, in bg-blue-500, bg says that this is a background style, blue sets the background colour to blue and 500 sets the colour "intensity" to a mid-value on a scale of 100 (light) to 900 (dark).</p>

<p>This is fine in its way, but the system may only become of interest to you when I tell you that you can make the tailwind utility classes responsive by simply adding a prefix to the style.</p>

<p>Tailwind recognizes the following screen-width "breakpoints":</p>

<div><table>
<thead>
<tr>
<th>Prefix</th>
<th>Screen Size</th>
<th>Minimum Width</th>
</tr>
</thead>
<tbody>
<tr>
<td>sm</td>
<td>Small devices</td>
<td>640px</td>
</tr>
<tr>
<td>md</td>
<td>Medium devices</td>
<td>768px</td>
</tr>
<tr>
<td>lg</td>
<td>Large devices</td>
<td>1024px</td>
</tr>
<tr>
<td>xl</td>
<td>Extra large devices</td>
<td>1280px</td>
</tr>
<tr>
<td>2xl</td>
<td>2x Extra large devices</td>
<td>1536px</td>
</tr>
</tbody>
</table></div>

<p>A style class such as "bg-gray-200" might thus be made to apply only to screens larger than 640px by specifying it as "sm:bg-gray-200".</p>

<p>The "This div has padding on all sides." example above could thus be made to display its paragraph with a blue background on screens with a maximum width of 640px and green on screens larger than this by styling it as follows:<br>
</p>

<pre class="brush:php;toolbar:false"><p>



</p><p>Because classes to the right take precedence, this makes the default background blue and overrides this with green when the screen is large enough. </p>

<p>For a fuller account of the Tailwind system and instructions on how to istall this in your project please see the Tailwind Website.</p>

<h3>
  
  
  3. Adaptive design for Server-side rendered webapps
</h3>

<p>Responsive design won't help you achieve more drastic effects where the desktop and mobile versions of a webapp are seriously different. Whereas a <strong>responsive design</strong> adjusts a standard pattern"fluidly" to accommodate different screen sizes, an <strong>adaptive</strong> design is prepared to give screen widths tailor-made solutions. </p>

<p>Expanding on the "tailoring" theme, you might think of responsive design as creating a single suit made of stretchable fabric that fits anyone. By contrast, adaptive design is like creating multiple tailored suits for different body types.</p>

<p>So if, for example, you felt that the mobile customers for your webapp were completely different from your desktop fans, you might want to give each community a tailor-made design (while delivering both under the same URL). </p>

<p>Conceptually, the obvious way to express this arrangement would be a displayIsMobile boolean guiding the display of MobileLayout and DesktopLayout components, as follows:<br>
</p>

<pre class="brush:php;toolbar:false">{#if displayIsMobile}
  <mobilelayout></mobilelayout>
{:else}
  <desktoplayout></desktoplayout>
{/if}

Jadi sekarang, displayIsMobile sedang duduk dalam objek acara untuk permintaan penyemak imbas. Acara ini ialah objek kompleks yang dibina oleh SvelteKit untuk mewakili permintaan semasa. Ia mengandungi ciri-ciri seperti:

• event.request: Ini ialah objek Permintaan asal, yang mengandungi butiran seperti kaedah HTTP (GET, POST, dll.), pengepala, URL dan kandungan.
• event.locals: Tempat untuk menyediakan data ini sepanjang kitaran hayat berikutnya permintaan.

Seperti yang anda bayangkan, memandangkan acara kini boleh didapati di mana-mana sahaja yang mungkin diperlukan, event.locals ialah perkara yang anda perlukan untuk menyediakan rumah untuk displayIsMobile.

Bentuk hujah {event, response} untuk dikendalikan() mungkin membingungkan anda. Ini adalah contoh sintaks "memusnahkan". Ini membolehkan anda mengekstrak secara langsung sifat tertentu daripada objek tanpa merujuk objek itu sendiri. Bayangkan terdapat argumen super-objek yang mengandungi peristiwa dan tindak balas sebagai sifat. Kemudian daripada menggunakan
konvensional

User-Agent: Mozilla/4.9 Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36

"memusnahkan sintaks" membolehkan anda menulis ini sebagai

// src/hooks.server.js
export async function handle({ event, resolve }) {

    let displayIsMobile;
    console.log("event.request.headers['sec-ch-ua-mobile']: ", event.request.headers.get('sec-ch-ua-mobile'));
    // First, try to get the mobile flag from the 'sec-ch-ua-mobile' header. This is a string header
    // and its value is '?1' if the user agent is a mobile device, otherwise it is '?0'.
    if (event.request.headers.get('sec-ch-ua-mobile') !== undefined) {
        displayIsMobile = event.request.headers.get('sec-ch-ua-mobile') === '?1' ? true : false;
    } else {
        // Otherwise, try the 'user-agent' header. For robust mobile detection, you might consider using
        // the ua-parser-js library. It provides consistent results across various edge cases.
        if (event.request.headers.get('user-agent') !== undefined) {
            displayIsMobile = event.request.headers.get('user-agent').toLowerCase().includes('mobile');
        } else {
            displayIsMobile = false
        }
    }

    // Put displayIsMobile into event.locals. This is an object provided by SvelteKit that is specific to a
    // particular browser request and which is acessible in every page and layout. In brief, event.locals lets
    // you pass data throughout the lifecycle of a request in SvelteKit. It provides a convenient way to share
    // computed values or state without needing to repeat logic or fetch data multiple times.
    event.locals.displayIsMobile = displayIsMobile;

    // Proceed with the request. In SvelteKit, resolve(event) is crucial for handling the request lifecycle.
    // It processes the current request and generates the final response that will be sent back to the client.
    const response = await resolve(event);
    return response;
}

Pada asasnya, ini ialah cara merujuk sifat (args.event etc) bagi objek args tanpa mengetahui nama objek induk (args). Ini membawa kepada kod yang lebih ketat dan berdaya tahan.

Bagaimanapun, dengan semua yang dikatakan, dengan displayIsMobile kini berada dalam objek acara untuk permintaan penyemak imbas, perkara yang jelas perlu dilakukan ialah menggunakan fungsi load() dalam fail page.server.js untuk mencungkilnya dan mengembalikannya ia ke page.svelte.

function handle(args) {
    const event = args.event;
    const resolve = args.resolve;
    // ... (code referencing variables "event" and "resolve")
}

Jadi di sini, akhirnya, adalah fail page.svelte yang sangat mudah untuk menyampaikan halaman penyesuaian

function handle({ event, resolve }) {
    // ...(code referencing variables "event" and "resolve")
}

Saya harap anda menikmatinya!

Ringkasnya, urutan penuh ialah:

1. Pelayan Sveltekit memasukkan permintaan myURL/myPage penyemak imbas dan melancarkan fail hooks.server.js projek. Di sini, pengepala permintaan diambil, nilai paparanIsMobile yang sesuai ditentukan dan hasilnya disimpan dalam objek acara Sveltekit.
2. Fungsi load() dalam fail page.server.j untuk laluan myPage mendapatkan semula displayIsMobile daripada acara dan mengembalikannya ke page.svelte
3. Fail page.svelte mendapatkan semula nilai data.displayIsMobile dan menggunakan ini dalam bahagian templatnya untuk menjana HTML yang sesuai.
4. Sveltekit membina skrip untuk penyemak imbas untuk menambah gelagat interaktif. Rujukan Tailwind sudah pun ditukar kepada pertanyaan media CSS semasa pembinaan halaman.
5. Pelayar menerima HTML ini, "menghidratkannya" dengan skrip Sveltekit dan memaparkannya pada peranti klien seperti yang diarahkan oleh pertanyaan media.

Setelah halaman terhidrat, kereaktifan adalah semata-mata kebimbangan pihak pelanggan. SvelteKit {#if popupIsVisible dalam bahagian templat kod anda akan menjadi fungsi terkumpul yang menogol elemen DOM berdasarkan popupIsVisible.