Simulating mobile resolution in a section of a webpage

Question

I have a website that will mainly be used for large screen monitors on the desktop. Within the page I will have various content sections, but I also want to have a mobile ap

Answer 1

You can't use dpi for anything as it's a hardware setting. you must use a viewport relation to display it at desired resolution % depending on wherever you prefere: PX or inches (calculed depending on actual viewport size that you can read with javascript).

Another nice and usually used option is to set a phone mockup with an iframe overlay that prints the content you want, here's an extracted example:

iframe {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #FFF;
    z-index: 5;
}

At the end, you want to simulate, and giving a mockup adds a valuable immersion, as you can add responsive elements on it (or fixed ones) to scale it to fit in. Emulate a mobile device is a different fact and not viable.