如何根据屏幕尺寸响应式修改HTML5 data-attribute属性值

Since CSS can’t modify data attributes dynamically based on screen size, we’ll use JavaScript (with jQuery, since your widget is jQuery-based) to adjust the data-amount value for mobile devices. Here’s how to fix this:

Step 1: Create a function to update the image count #

This function checks the current screen width and updates the data-amount attribute accordingly. Adjust the breakpoint (768px) to match your project’s mobile threshold.

function adjustInstagramWidget() {
  // Replace with your actual widget selector (class or ID from your HTML)
  const $instagramWidget = $('.instagram-widget');
  
  if (!$instagramWidget.length) return; // Exit if the widget isn't found on the page

  // Check if we're on a mobile screen
  const isMobile = $(window).width() < 768;
  
  // Update the data-amount attribute to 6 for mobile, 12 for larger screens
  $instagramWidget.attr('data-amount', isMobile ? 6 : 12);

  // Optional: Re-initialize the widget if it doesn't detect attribute changes automatically
  // Some jQuery plugins need a refresh to pick up new settings:
  // $instagramWidget.instagramWidget('destroy'); // Replace with your widget's destroy method
  // $instagramWidget.instagramWidget(); // Re-initialize with the new data-amount value
}

Step 2: Run the function on page load and resize #

We need to ensure the adjustment happens when the page first loads, and whenever the user resizes their browser window (to handle device rotation or window scaling).

// Execute the function when the page finishes loading
$(document).ready(adjustInstagramWidget);

// Execute on window resize (with a small delay to avoid excessive function calls)
$(window).on('resize', function() {
  clearTimeout(this.resizeTimer);
  this.resizeTimer = setTimeout(adjustInstagramWidget, 250);
});

Key Notes: #

• Selector Accuracy: Double-check that $('.instagram-widget') targets your actual widget’s div element (use the correct class or ID from your HTML).
• Breakpoint Adjustment: Change 768px to whatever mobile breakpoint your project uses (e.g., 576px for smaller phones).
• Widget Re-initialization: If your widget doesn’t update automatically after changing data-amount, refer to its documentation to find the correct method to re-initialize or refresh it. Most jQuery plugins include a way to destroy and re-create the widget with new settings.

内容的提问来源于stack exchange，提问作者SyberKnight