{"id":5115,"date":"2026-06-18T13:38:32","date_gmt":"2026-06-18T13:38:32","guid":{"rendered":"https:\/\/rimanagency.com\/mobile-friendly-test-preview-your-page-at-every-mobile-breakpoint\/"},"modified":"2026-06-18T13:38:32","modified_gmt":"2026-06-18T13:38:32","slug":"mobile-friendly-test-preview-your-page-at-every-mobile-breakpoint","status":"publish","type":"page","link":"https:\/\/rimanagency.com\/fr\/mobile-friendly-test-preview-your-page-at-every-mobile-breakpoint\/","title":{"rendered":"Mobile-Friendly Test \u2014 Preview Your Page at Every Mobile Breakpoint"},"content":{"rendered":"<style>.rt-h{background:linear-gradient(135deg,#f1f5e8,#e8efdb);border-radius:14px;padding:32px;margin:0 0 24px;text-align:center}.rt-h h1{margin:0 0 10px;font-size:28px;color:#4a6320}.rt-g{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:0 0 24px}.rt-f,.rt-o{background:#fff;border:1px solid #e0e6d8;border-radius:10px;padding:22px}.rt-f h3,.rt-o h3{margin:0 0 14px;color:#4a6320;font-size:18px}.rt-f label{display:block;font-size:13px;color:#516048;font-weight:600;margin:10px 0 6px}.rt-f input,.rt-f select,.rt-f textarea{width:100%;padding:9px;border:1px solid #d4dac6;border-radius:6px;font-size:14px;box-sizing:border-box;font-family:inherit}.rt-btn{background:#719430;color:#fff;border:none;padding:11px 20px;border-radius:6px;font-weight:700;cursor:pointer;width:100%;margin-top:14px;font-size:15px}.rt-btn:hover{background:#4a6320}.rt-cta{background:linear-gradient(135deg,#719430,#4a6320);color:#fff;border-radius:14px;padding:32px;text-align:center;margin:30px 0}.rt-cta h3{margin:0 0 6px;color:#fff}.rt-cta a{background:#fff;color:#4a6320;padding:12px 28px;border-radius:6px;font-weight:700;text-decoration:none;display:inline-block;margin-top:14px}@media(max-width:768px){.rt-g{grid-template-columns:1fr}}<\/style>\n<div class=\"rt-h\">\n<h1>Mobile-Friendly Test<\/h1>\n<p>Paste a page\\u2019s HTML and instantly see how it renders at every common mobile breakpoint \u2014 iPhone SE (375px), iPhone Pro (390px), Pixel (412px), iPad (768px). Plus an audit of viewport meta, font sizes, and tap-target spacing.<\/p>\n<\/div>\n<div class=\"rt-g\">\n<div class=\"rt-f\">\n<h3>Paste HTML<\/h3>\n<p><label>Paste page HTML source<\/label><textarea id=\"mf-in\" rows=\"9\" placeholder=\"<!DOCTYPE html>&#8230;&#8221;><\/textarea><label>Preview at breakpoint<\/label><select id=\"mf-bp\"><option value=\"375\" selected>iPhone SE \/ 8 \/ X (375px)<\/option><option value=\"390\">iPhone 12-15 (390px)<\/option><option value=\"412\">Google Pixel 7-8 (412px)<\/option><option value=\"414\">iPhone 11 Pro Max (414px)<\/option><option value=\"360\">Samsung Galaxy S22 (360px)<\/option><option value=\"768\">iPad portrait (768px)<\/option><\/select><\/div>\n<div class=\"rt-o\">\n<h3>Mobile Audit + Preview<\/h3>\n<div id=\"mf-out\" style=\"background:#fafafa;border:1px solid #e0e6d8;border-radius:8px;padding:14px;font-size:14px;min-height:80px;line-height:1.5\">Audit results appear here<\/div>\n<\/div>\n<\/div>\n<p><script>function cMf(){var html=document.getElementById(\"mf-in\").value;var bp=document.getElementById(\"mf-bp\").value;if(!html.trim()){document.getElementById(\"mf-out\").innerHTML=\"<i style=\\\"color:#888\\\">Paste HTML to run mobile audit<\/i>\";return}var doc;try{doc=new DOMParser().parseFromString(html,\"text\/html\")}catch(e){return}var vp=doc.querySelector(\"meta[name=viewport]\");var vpContent=vp?vp.getAttribute(\"content\"):null;var hasViewport=!!vp;var hasDeviceWidth=vpContent&&vpContent.indexOf(\"device-width\")>-1;var hasScalable=vpContent&&!vpContent.match(\/user-scalable\\s*=\\s*no\/);var fontSizes=Array.from(doc.querySelectorAll(\"[style*=font-size]\")).map(function(el){var m=(el.getAttribute(\"style\")||\"\").match(\/font-size\\s*:\\s*(\\d+(?:\\.\\d+)?)\\s*px\/);return m?parseFloat(m[1]):null}).filter(Boolean);var smallFonts=fontSizes.filter(function(f){return f<14}).length;var checks=[{label:\"Viewport meta tag\",pass:hasViewport,fix:\"Add <meta name=\\\"viewport\\\" content=\\\"width=device-width, initial-scale=1\\\">\"},{label:\"device-width in viewport\",pass:hasDeviceWidth,fix:hasViewport?\"Update viewport to include width=device-width\":\"Set viewport first\"},{label:\"Allows user scaling (accessibility)\",pass:!vpContent||hasScalable,fix:\"Avoid user-scalable=no \u2014 it blocks accessibility zoom\"},{label:\"No inline font sizes below 14px\",pass:smallFonts===0,fix:smallFonts+\" inline font-size below 14px detected \u2014 small text is hard to read on mobile\"}];var preview='<\/p>\n<div style=\"border:8px solid #333;border-radius:24px;background:#fff;padding:0;max-width:'+bp+'px;margin:14px auto;overflow:hidden\"><iframe srcdoc=\"'+html.replace(\/\"\/g,\"&quot;\").substring(0,80000)+'\" sandbox=\"allow-same-origin\" style=\"width:100%;height:560px;border:0;display:block\"><\/iframe><\/div>\n<p>';var checksHtml=checks.map(function(c){var col=c.pass?\"#719430\":\"#c44\";var ic=c.pass?\"\u2713\":\"\u2716\";return '<\/p>\n<div style=\"background:#fff;border:1px solid #e0e6d8;border-radius:8px;padding:12px;display:flex;gap:10px;align-items:flex-start\">\n<div style=\"color:'+col+';font-weight:700;font-size:18px;width:20px;flex-shrink:0\">'+ic+'<\/div>\n<div><b style=\"color:#4a6320\">'+c.label+'<\/b>'+(!c.pass?'<\/p>\n<div style=\"font-size:12px;color:#c44;margin-top:3px\">'+c.fix+'<\/div>\n<p>':'')+'<\/p><\/div>\n<\/div>\n<p>'}).join(\"\");document.getElementById(\"mf-out\").innerHTML='<\/p>\n<div style=\"display:grid;gap:10px\">'+checksHtml+'<\/div>\n<div style=\"font-size:11px;color:#719430;font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin:20px 0 6px\">Live preview at '+bp+'px<\/div>\n<p>'+preview}document.getElementById(\"mf-in\").addEventListener(\"input\",cMf);document.getElementById(\"mf-bp\").addEventListener(\"change\",cMf);cMf();<\/script><\/p>\n<h2>How to use the Mobile-Friendly Test<\/h2>\n<p>Paste your page HTML. Pick a breakpoint to preview \u2014 iPhone SE (375px) is the most common starting point, then test Galaxy S22 (360px) for the narrowest, then Pixel (412px) for a wide phone, then iPad (768px) for tablet. The tool runs four key audits \u2014 viewport meta, device-width, accessibility zoom, and inline font sizes \u2014 and renders a sandboxed iframe preview at the chosen breakpoint.<\/p>\n<h2>Why this tool matters<\/h2>\n<p>Google has used mobile-first indexing since 2019: it indexes the mobile version of your site, not the desktop. If your mobile rendering breaks, your rankings break. The viewport meta tag is the single most important mobile signal \u2014 without it, Google assumes your page is desktop-only and penalizes mobile users. The tool catches this and other common mobile-rendering issues in one view.<\/p>\n<h2>Common use cases<\/h2>\n<ul>\n<li>Pre-launch mobile audit of a landing page<\/li>\n<li>Spotting accessibility issues (tiny inline fonts, blocked zoom)<\/li>\n<li>Comparing how a redesign renders at multiple breakpoints<\/li>\n<li>Checking how text-heavy emails preview at narrow widths<\/li>\n<li>Diagnosing why mobile rankings dropped after a CSS change<\/li>\n<li>Building a mobile QA checklist for editors and developers<\/li>\n<\/ul>\n<h2>Why we preview HTML in an iframe<\/h2>\n<p>Browsers block fetching arbitrary URLs from a tool running in the browser (CORS). Pasting HTML gives you a sandboxed preview of exactly the markup you paste \u2014 useful for staging environments, behind-firewall pages, and HTML you generated programmatically. The preview is sandboxed (no scripts execute) for security.<\/p>\n<h2>Frequently Asked Questions<\/h2>\n<p><strong>Why does my preview look broken?<\/strong><br \/>The iframe sandbox blocks external scripts and stylesheets for security. The preview reflects the inline HTML\/CSS only. For a fully rendered preview use Chrome DevTools device emulation on the live page.<\/p>\n<p><strong>What viewport meta tag should I use?<\/strong><br \/><meta name=\"viewport\" content=\"width=device-width, initial-scale=1\"> is the standard. Avoid user-scalable=no \u2014 it blocks accessibility zoom and is a Google penalty signal.<\/p>\n<p><strong>What font size is too small for mobile?<\/strong><br \/>Below 14px (16px is ideal). Anything below 12px is unreadable for most mobile users and triggers Google\\u2019s &#8220;Text too small to read&#8221; warning in Search Console.<\/p>\n<p><strong>How does this compare to Google\\u2019s official Mobile-Friendly Test?<\/strong><br \/>Google\\u2019s test fetches the URL with their crawler \u2014 definitive, but only works on publicly accessible pages. Our tool runs on pasted HTML \u2014 works on staging, behind firewalls, or for pre-launch validation.<\/p>\n<div class=\"rt-cta\">\n<h3>Need a full mobile UX audit and optimization roadmap?<\/h3>\n<p style=\"margin:0;opacity:.95\">Riman Agency runs mobile-first design and SEO programs.<\/p>\n<p><a href=\"\/contact\/\">Book a Mobile Audit<\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Mobile-Friendly Test Paste a page\\u2019s HTML and instantly see how it renders at every common mobile breakpoint \u2014 iPhone SE (375px), iPhone Pro (390px), Pixel (412px), iPad (768px). Plus an audit of viewport meta, font sizes, and tap-target spacing. Paste HTML Paste page HTML source<\/p>","protected":false},"author":4,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-5115","page","type-page","status-publish","hentry"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Mobile-Friendly Test \u2014 Preview Your Page at Every Mobile Breakpoint - Riman Agency<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/rimanagency.com\/fr\/mobile-friendly-test-preview-your-page-at-every-mobile-breakpoint\/\" \/>\n<meta property=\"og:locale\" content=\"fr_CA\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Mobile-Friendly Test \u2014 Preview Your Page at Every Mobile Breakpoint - Riman Agency\" \/>\n<meta property=\"og:description\" content=\"Mobile-Friendly Test Paste a pageu2019s HTML and instantly see how it renders at every common mobile breakpoint \u2014 iPhone SE (375px), iPhone Pro (390px), Pixel (412px), iPad (768px). Plus an audit of viewport meta, font sizes, and tap-target spacing. Paste HTML Paste page HTML source\" \/>\n<meta property=\"og:url\" content=\"https:\/\/rimanagency.com\/fr\/mobile-friendly-test-preview-your-page-at-every-mobile-breakpoint\/\" \/>\n<meta property=\"og:site_name\" content=\"Riman Agency\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/rimanagency.com\\\/mobile-friendly-test-preview-your-page-at-every-mobile-breakpoint\\\/\",\"url\":\"https:\\\/\\\/rimanagency.com\\\/mobile-friendly-test-preview-your-page-at-every-mobile-breakpoint\\\/\",\"name\":\"Mobile-Friendly Test \u2014 Preview Your Page at Every Mobile Breakpoint - Riman Agency\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/rimanagency.com\\\/#website\"},\"datePublished\":\"2026-06-18T13:38:32+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/rimanagency.com\\\/mobile-friendly-test-preview-your-page-at-every-mobile-breakpoint\\\/#breadcrumb\"},\"inLanguage\":\"fr-CA\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/rimanagency.com\\\/mobile-friendly-test-preview-your-page-at-every-mobile-breakpoint\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/rimanagency.com\\\/mobile-friendly-test-preview-your-page-at-every-mobile-breakpoint\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/rimanagency.com\\\/home\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Mobile-Friendly Test \u2014 Preview Your Page at Every Mobile Breakpoint\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/rimanagency.com\\\/#website\",\"url\":\"https:\\\/\\\/rimanagency.com\\\/\",\"name\":\"Riman Agency\",\"description\":\"A Full Service Digital Marketing Agency\",\"publisher\":{\"@id\":\"https:\\\/\\\/rimanagency.com\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/rimanagency.com\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"fr-CA\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/rimanagency.com\\\/#organization\",\"name\":\"Riman Agency\",\"url\":\"https:\\\/\\\/rimanagency.com\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"fr-CA\",\"@id\":\"https:\\\/\\\/rimanagency.com\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/rimanagency.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/RIMANagency-all-logos-1-2.png\",\"contentUrl\":\"https:\\\/\\\/rimanagency.com\\\/wp-content\\\/uploads\\\/2022\\\/02\\\/RIMANagency-all-logos-1-2.png\",\"width\":694,\"height\":211,\"caption\":\"Riman Agency\"},\"image\":{\"@id\":\"https:\\\/\\\/rimanagency.com\\\/#\\\/schema\\\/logo\\\/image\\\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Mobile-Friendly Test \u2014 Preview Your Page at Every Mobile Breakpoint - Riman Agency","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/rimanagency.com\/fr\/mobile-friendly-test-preview-your-page-at-every-mobile-breakpoint\/","og_locale":"fr_CA","og_type":"article","og_title":"Mobile-Friendly Test \u2014 Preview Your Page at Every Mobile Breakpoint - Riman Agency","og_description":"Mobile-Friendly Test Paste a pageu2019s HTML and instantly see how it renders at every common mobile breakpoint \u2014 iPhone SE (375px), iPhone Pro (390px), Pixel (412px), iPad (768px). Plus an audit of viewport meta, font sizes, and tap-target spacing. Paste HTML Paste page HTML source","og_url":"https:\/\/rimanagency.com\/fr\/mobile-friendly-test-preview-your-page-at-every-mobile-breakpoint\/","og_site_name":"Riman Agency","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/rimanagency.com\/mobile-friendly-test-preview-your-page-at-every-mobile-breakpoint\/","url":"https:\/\/rimanagency.com\/mobile-friendly-test-preview-your-page-at-every-mobile-breakpoint\/","name":"Mobile-Friendly Test \u2014 Preview Your Page at Every Mobile Breakpoint - Riman Agency","isPartOf":{"@id":"https:\/\/rimanagency.com\/#website"},"datePublished":"2026-06-18T13:38:32+00:00","breadcrumb":{"@id":"https:\/\/rimanagency.com\/mobile-friendly-test-preview-your-page-at-every-mobile-breakpoint\/#breadcrumb"},"inLanguage":"fr-CA","potentialAction":[{"@type":"ReadAction","target":["https:\/\/rimanagency.com\/mobile-friendly-test-preview-your-page-at-every-mobile-breakpoint\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/rimanagency.com\/mobile-friendly-test-preview-your-page-at-every-mobile-breakpoint\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/rimanagency.com\/home\/"},{"@type":"ListItem","position":2,"name":"Mobile-Friendly Test \u2014 Preview Your Page at Every Mobile Breakpoint"}]},{"@type":"WebSite","@id":"https:\/\/rimanagency.com\/#website","url":"https:\/\/rimanagency.com\/","name":"Agence Riman","description":"Une agence de marketing num\u00e9rique \u00e0 service complet","publisher":{"@id":"https:\/\/rimanagency.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/rimanagency.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"fr-CA"},{"@type":"Organization","@id":"https:\/\/rimanagency.com\/#organization","name":"Agence Riman","url":"https:\/\/rimanagency.com\/","logo":{"@type":"ImageObject","inLanguage":"fr-CA","@id":"https:\/\/rimanagency.com\/#\/schema\/logo\/image\/","url":"https:\/\/rimanagency.com\/wp-content\/uploads\/2022\/02\/RIMANagency-all-logos-1-2.png","contentUrl":"https:\/\/rimanagency.com\/wp-content\/uploads\/2022\/02\/RIMANagency-all-logos-1-2.png","width":694,"height":211,"caption":"Riman Agency"},"image":{"@id":"https:\/\/rimanagency.com\/#\/schema\/logo\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/rimanagency.com\/fr\/wp-json\/wp\/v2\/pages\/5115","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rimanagency.com\/fr\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/rimanagency.com\/fr\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/rimanagency.com\/fr\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/rimanagency.com\/fr\/wp-json\/wp\/v2\/comments?post=5115"}],"version-history":[{"count":0,"href":"https:\/\/rimanagency.com\/fr\/wp-json\/wp\/v2\/pages\/5115\/revisions"}],"wp:attachment":[{"href":"https:\/\/rimanagency.com\/fr\/wp-json\/wp\/v2\/media?parent=5115"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}