ウェブサイトの画面サイズに基づいてバックエンドから画像をリクエストする方法は？

Question

angularjsとbootstrapのアプリを作成しました。コンテンツはバックエンドによって提供されます。また、動的画像がリンクとして機能します。彼らはバックエンドから要求されることがありますwidthサイズが異なります。

質問：のバックエンドからデータを要求する前に、ユーザーの画面を検出するにはどうすればよいですか？max-width？バックエンドがより小さなイメージへのリンクで応答するように？

Answer 1

HTMLはリクエストによって画面オプションを送信しません。フロントエンドに隠しフィールドを作成し、必要な値でサーバーに送り返す必要があります。バックエンドが私が知っているとにかく画面の幅を計算する方法は他にありません。

このASP.NET Get Screen Width

Answer 2

The <picture> elementあなたはメディアクエリに基づいて異なるコンテンツの画像をロードすることができます参照してください。

<picture> 
    <source 
    media="(min-width: 650px)" 
    srcset="images/kitten-stretching.png"> 
    <source 
    media="(min-width: 465px)" 
    srcset="images/kitten-sitting.png"> 
    <img 
    src="images/kitten-curled.png" 
    alt="a cute kitten"> 
</picture> 

深い読み：あなたはビューポートのサイズを取得することができますjqueryのを使用して

• Built-in Browser Support for Responsive Images
• Specification
• Media Queries (MDN)

Answer 3

。

var viewport = $(window).width(); 
 

 
$('#viewportSize').html(viewport);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="viewportSize"></div>