Responsive design ideas (mobile/tablet view)


I’m currently working on making the page tablet friendly.
I want to have one navigation bar design for desktop and the side menu option for mobile/tablet.
I built a separate page for mobile view and linked it using the bubble’s “mobile version” option. The mobile view is also built with narrower width (420px).

However, it doesn’t use the mobile version on a tablet and the desktop version on iPad is not as functional. How to resolve this the best? I don’t want to build a separate page for tablet, since the maintenance is quite time consuming.
Should I make the mobile view wider, so it could be used on iPad also and play with min-max widths? If so, how to make it display the mobile version on tablet?

Any ideas or good tutorials on this?

Big thanks

I’m guessing when page is loaded, redirect user to mobile view page when “current page width” is in tablet resolution or smaller?