0

So I have a rather primitive HTML table, but it should have two versions - one for mobile, one for desktop/tablet.

In the desktop version the table is normal - information is on the left side and the corresponding points are at the right side.

Now in the mobile version there should be a new tablerow which contains the same text in a rowspan of 2.

As far as I am aware, this isn't possible to do with purely CSS (media queries)...

I am aware you can get the viewport height and width using JavaScript, but then it should be transmitted to an API which gives corresponding content.

  • Is this prototype any good?:

The frontend sends a POST request using Fetch to the Backend with the data of the viewport width and then fetches the corresponding HTML from the Backend via AJAX.

  • Would this work?
  • This looks rather cumbersome and complicated for such basic functionality. Is there a better way to do this?

My pseudocode: Frontend:

var width = getViewportwidth();
var xhr = new XMLHttpRequest();
xhr.open(width, url);

.fetch(API URL here, options here etc).then {
Ajax call here.addtodomhere("#domelement");
}

Backend:

[/Apiurlhere]
[GET]
if (width) < 600 {
table markup for mobile view here
} else {
table markup for desktop view here 
}

I am using .NET Core for the Backend if it matters.

Munchkin
  • 857
  • 5
  • 24
  • 51
  • 1
    Just an alternate option... You can use the following answer to check for mobile on the ASP.NET Core backend and serve the correct HTML on page load via your backend, instead of relying on CSS/JS/AJAX - https://stackoverflow.com/questions/13086856/mobile-device-detection-in-asp-net/13086894#13086894 – Gary Thomas Dec 03 '21 at 11:54
  • @GaryThomas that is genius! I'll try it out and if it works feel free to post this as an answer and I would accept in that case. – Munchkin Dec 03 '21 at 11:56
  • Only disadvantage is that you have to make a new api call when the user resizes their window. – Kokodoko Dec 03 '21 at 12:00
  • @GaryThomas Yup, it worked, feel free to answer ^^ – Munchkin Dec 03 '21 at 15:03

0 Answers0