Google indexes the web mobile-first: the mobile version of a page is the version used for indexing and ranking. If your site behaves differently on a phone than on a desktop, the phone version is the one that counts.
The consequence people miss: content that exists only on the desktop layout is effectively invisible. If a responsive design hides a section on small screens, or a mobile template omits text the desktop one includes, that content is not what the engine is evaluating.
This makes "hide it on mobile to save space" a decision with SEO consequences, not just a layout choice. Collapsing content behind a tap to expand is generally fine — the content is still in the HTML. Removing it from the mobile markup entirely is not.
The same logic applies to structured data, headings, internal links, and images. Whatever is missing from the mobile version is missing, full stop. Checking your page on a narrow viewport is checking the version that matters.
Serving one set of HTML that adapts through CSS avoids the whole class of problem: there is only one version, so it cannot diverge. It also means one URL per page, which keeps canonicals and links simple.
<!-- Required for responsive layouts to work at all -->
<meta name="viewport" content="width=device-width, initial-scale=1">Without that viewport tag a mobile browser assumes a desktop-width page and zooms out, producing the tiny unreadable rendering that responsive CSS was meant to prevent. It is one line, and omitting it undoes everything else.
type attributes bring up the right keyboard and save real frustration.Browser developer tools can simulate a narrow viewport, which catches layout problems quickly. But a simulator does not reproduce a real phone's processor speed, network conditions, or touch accuracy — testing on an actual device, ideally a mid-range one on a mobile connection rather than the newest flagship on office Wi-Fi, reveals problems a desktop simulation never will.