[{"data":1,"prerenderedAt":355},["ShallowReactive",2],{"project-41647687":3},{"id":4,"name":5,"line":6,"line_source":7,"title":8,"url":9,"domain":10,"maker":11,"posted_at":12,"year":13,"points":14,"comments":15,"rank_in_year":16,"shown_in_year":17,"top":18,"tier":19,"category":20,"subcategory":21,"format":22,"keywords":23,"reception":28,"sentiment":29,"stance_mix":30,"scored_comments":35,"aspects":36,"strip":43,"post_text":45,"what":46,"said":78,"maker_in_thread":202,"shape":214,"grid":218,"attempts":317,"same_week":318,"maker_shows":346,"maker_hidden":347,"reader_version":348,"card":349},"41647687","Viewport Tester","Test your website on 180+ device viewports (with multi-device mode)","title","Show HN: Test your website on 180+ device viewports (with multi-device mode)","https:\u002F\u002Fviewport-tester.com\u002F","viewport-tester.com","onassar",1727273089,2024,74,49,1030,3515,30,"notable","dev_tools","responsive design testing","web_app",[24,25,26,27],"responsive testing","viewport tester","device viewports","frontend testing","roasted",-0.176,{"positive":31,"neutral":32,"mixed":33,"critical":34},5,6,0,11,22,{"execution":37,"idea":39,"pricing":41,"design":42},{"positive":33,"critical":38},8,{"positive":33,"critical":40},1,{"positive":33,"critical":40},{"positive":40,"critical":40},[40,33,40,33,40,33,40,33,33,40,33,40,33,40,40,33,40,31,33,31,33,44,31,33,40,33,44,31,33,44,33,44,44,33,44,33,33,31,33,40],3,"Hey HN! We do a lot of frontend testing, and one thing we find frustrating is the limited tooling available to observe how a URL renders on different viewports\u002Fdevices simultaneously.\n\nFor example, we can use Chrome Inspector's \"Device\" previews, but we run into the following:\n\n- Chrome doesn't keep those devices\u002Fviewports up to date, and adding new ones is pretty annoying (we've open sourced our collection of 180+ viewports\u002Fdimensions under MIT).\n\n- You can’t see multiple viewports at once (and it’s cumbersome switching back and forth)\n\n- When you notice a problem, there's no simple way to de",{"problem":47,"audience":53,"pricing":60,"motivation":66,"time_to_build":73,"stack":74,"openness":75,"stage":76,"team_size":77},{"value":48,"source":49,"evidence":50},"Observing how a URL renders across many viewports and devices at once is hard with browser device previews","maker",[51],{"id":52},"post",{"value":54,"source":49,"evidence":55},"Frontend developers and teams testing responsive websites",[56,57],{"id":52},{"id":58,"by":11,"text":59},"41648690","Thanks for the comment @account42 Agreed that a really-great responsive site is one where specific viewport dimensions don't matter. One thing we've run into (and want to test…",{"value":61,"source":49,"evidence":62},"Free to use; earlier sign-up gate removed",[63],{"id":64,"by":11,"text":65},"41647865","Whoops! That was only meant to stay in there for an unrelated feature. Removed :)",{"value":67,"source":49,"evidence":68},"Frustration with limited tooling for viewing a URL across devices at once, and sharing issues with a team",[69,70],{"id":52},{"id":71,"by":11,"text":72},"41648788","Thanks for sharing this @Brajeshwar! This is a great tool and one we played with. One primary motivation for us, that caused us to build a web-based Responsive UI testing tool,…",null,[],"open_source","beta","unknown",{"praise":79,"objections":99,"requests":136,"questions":164,"alternatives":176},[80,88],{"value":81,"source":82,"evidence":83},"Multi-device view at once is impressive","commenter",[84],{"id":85,"by":86,"text":87},"41649806","Dev_Olly","Thank you for creating this! Impressed by multi-devices at once. Looking forward to seeing how this evolves!",{"value":89,"source":82,"evidence":90},"Useful for testing responsive layouts",[91,95],{"id":92,"by":93,"text":94},"41647877","jeswin","Thanks. Very useful app.",{"id":96,"by":97,"text":98},"41648765","SBArbeit","This is brilliant. Thanks for building it.",[100,115,126],{"value":101,"source":82,"evidence":102},"Does not work on mobile Safari or mobile browsers, showing a 'Mobile version not available' modal",[103,107,111],{"id":104,"by":105,"text":106},"41648145","lbhdc","I am getting a \"Mobile version not available\" modal that wont go away on its own on desktop. I can trick it by making my browser full screen, refreshing, then resizing it back to…",{"id":108,"by":109,"text":110},"41648674","troupo","Mobile Safari set to \"always show desktop version\" still triggers this modal. Edit: even if you click \"Request mobile version\", the modal is there",{"id":112,"by":113,"text":114},"41648914","ivanjermakov","\"Mobile version not available\" popup that cannot be closed is such an irony. Next time, test your website with a viewport tester :)",{"value":116,"source":82,"evidence":117},"Broken rendering on some sites and CORS errors loading static assets",[118,122],{"id":119,"by":120,"text":121},"41647926","throwaway481","Something doesnt seem right. This website loads fine on Chrome's inspector design previews, but looks broken here: https:\u002F\u002Fviewport-tester.com\u002F?url=https%3A%2F%2Fespncricinfo.com",{"id":123,"by":124,"text":125},"41650089","butz","Getting some CORS errors. E.g. https:\u002F\u002Fwww.gnome.org\u002F fails to load fontawesome icons. And there's an interesting bug where opening mobile menu loads a page.",{"value":127,"source":82,"evidence":128},"Viewports ignore browser and device address and bottom bars",[129,133],{"id":130,"by":131,"text":132},"41648757","doctorpangloss","Are the viewports sized with or without browser chrome, like the address bar and bottom bar?",{"id":134,"by":11,"text":135},"41648820","Great question! Right now, it doesn't take into consideration the browser or device address\u002Fbottom bars. We documented that here:…",[137,147,157],{"value":138,"source":82,"evidence":139},"Toggle browser address and bottom bars to simulate real scrolling",[140,144],{"id":141,"by":142,"text":143},"41648933","retrofuturism","If I could toggle between different states of the top\u002Fbottom bars I would use this tool every day.",{"id":145,"by":11,"text":146},"41649146","Haha funny analogy. What you and @alwa said makes sense: thanks for sharing that. It's related to Caveat #1 I mentioned above, but I like the idea of being able to toggle on\u002Foff…",{"value":148,"source":82,"evidence":149},"Portrait and landscape modes",[150,154],{"id":151,"by":152,"text":153},"41649087","alwa","I am not the person who originally asked for this, but I’d want to scan my eyes over conditions: * with and without the keyboard focused, * in each of the preference states (e.g.…",{"id":155,"by":11,"text":156},"41649157","Thanks for this @alwa. It definitely helped me better understand the question. I commented below @doctorpangloss but agreed: portrait\u002Flandscape mode are vital, and that's already…",{"value":158,"source":82,"evidence":159},"Support for mobile Safari and mobile devices",[160],{"id":161,"by":162,"text":163},"41648986","altdataseller","That’s not a bug. Thats a feature. When I request desktop view in my iphone, it should just treat me as a desktop user. I know its buggy. I know its a horrible experience but I…",[165,169],{"value":166,"source":82,"evidence":167},"Are viewports sized with or without browser chrome?",[168],{"id":130,"by":131,"text":132},{"value":170,"source":82,"evidence":171},"Can the viewport list be exported to Chrome DevTools?",[172],{"id":173,"by":174,"text":175},"41649436","westurner","DevTools has a list of default viewport sizes, but they change from browser release to release. Is there a better way or an existing [YAML] file schema to generate a list of…",[177,184,191,198],{"value":178,"source":82,"evidence":179},"Responsively app",[180],{"id":181,"by":182,"text":183},"41648755","Brajeshwar","This reminded me of a very similar one but for the desktop from a few years back. Here you go; https:\u002F\u002Fresponsively.app Source at…",{"value":185,"source":82,"evidence":186},"Email On Acid device preview",[187],{"id":188,"by":189,"text":190},"41648776","clueless","could this be a replacement for emailonacid's device viewport preview feature?",{"value":192,"source":82,"evidence":193},"Chrome DevTools device mode",[194,195],{"id":119,"by":120,"text":121},{"id":196,"by":174,"text":197},"41649363","shot-scraper is a CLI tool for HTML render snapshots with --height --width and --scale-factor (--retina ~= --scale-factor=2.0) args, and a -j\u002F--javascript option to run JS before…",{"value":199,"source":82,"evidence":200},"shot-scraper and Playwright",[201],{"id":196,"by":174,"text":197},{"comments":203,"answered":32,"key":204},25,[205,208,211],{"id":206,"text":207},"41648155","Ahh bug related to how we detect mobile. Would ya mind reaching out at hello@viewport-tester.com so I can get a few more details on this?",{"id":209,"text":210},"41649025","Really sorry to hear your first impression wasn't great @altdataseller It has to do with limitations around performance\u002Fmemory. In some instances, loading large documents in…",{"id":212,"text":213},"41648261","This should be fixed now.",{"commenters":215,"max_depth":38,"maker_replies":203,"first_comment_mins":216,"lifespan_hours":217},18,15,67,[219,221,223,224,226,228,230,232,234,237,240,242,243,246,250,252,254,256,257,259,263,265,267,269,270,272,274,276,278,280,283,284,285,286,288,290,292,294,296,297,299,301,302,304,306,308,312,314,315],[104,33,40,220,105,33],"project\u002Fcritical\u002Fexecution",[206,33,33,222,11,40],"maker\u002Fneutral\u002Fnone",[161,33,40,220,162,33],[209,33,33,225,11,40],"maker\u002Fneutral\u002Fperformance",[212,33,33,227,11,40],"maker\u002Fneutral\u002Fexecution",[229,33,40,220,105,33],"41648368",[231,33,33,222,11,40],"41648375",[233,33,40,220,105,33],"41648468",[235,33,33,236,11,40],"41648489","project\u002Fneutral\u002Fexecution",[238,33,33,239,105,33],"41648514","commenter\u002Fneutral\u002Fnone",[241,33,33,239,11,40],"41649389",[108,33,40,220,109,33],[244,33,33,245,11,40],"41648699","project\u002Fneutral\u002Fperformance",[247,40,40,248,249,33],"41648660","project\u002Fcritical\u002Fidea","account42",[58,40,33,251,11,40],"maker\u002Fneutral\u002Fidea",[119,253,40,220,120,33],2,[255,253,33,227,11,40],"41647940",[123,44,40,220,124,33],[258,44,33,227,11,40],"41650099",[260,261,40,262,93,33],"41647846",4,"project\u002Fcritical\u002Fpricing",[64,261,33,264,11,40],"maker\u002Fneutral\u002Fpricing",[92,261,31,266,93,33],"project\u002Fpositive\u002Fnone",[268,261,33,222,11,40],"41647895",[85,31,31,266,86,33],[271,31,33,222,11,40],"41649814",[130,32,44,273,131,33],"project\u002Fneutral\u002Fdesign",[134,32,33,275,11,40],"maker\u002Fneutral\u002Fdesign",[141,32,31,277,142,33],"project\u002Fpositive\u002Fdesign",[279,32,33,275,11,40],"41648954",[281,32,40,282,131,33],"41649029","project\u002Fcritical\u002Fdesign",[145,32,33,275,11,40],[151,32,44,273,152,33],[155,32,33,275,11,40],[96,287,31,266,97,33],7,[289,287,33,222,11,40],"41648828",[188,38,44,291,189,33],"project\u002Fneutral\u002Fidea",[293,38,33,251,11,40],"41648852",[181,295,44,291,182,33],9,[71,295,33,251,11,40],[196,295,44,298,174,33],"project\u002Fneutral\u002Fnone",[300,295,33,222,11,40],"41649407",[173,295,44,298,174,33],[303,295,33,222,11,40],"41649462",[305,295,33,239,174,33],"41675697",[307,295,33,222,11,40],"41678932",[309,310,31,266,311,33],"41649012",10,"kmfsousa",[313,310,33,222,11,40],"41649033",[112,34,40,220,113,33],[316,34,33,225,11,40],"41648936",[],[319,324,328,332,337,342],{"id":320,"name":321,"points":322,"category":323},"41635592","OpenFreeMap",848,"infrastructure",{"id":325,"name":326,"points":327,"category":20},"41604262","Container Desktop",464,{"id":329,"name":330,"points":331,"category":20},"41591018","Sidekick",452,{"id":333,"name":334,"points":335,"category":336},"41609947","Time Flies",401,"creative",{"id":338,"name":339,"points":340,"category":341},"41603865","AnySkin",390,"hardware",{"id":343,"name":344,"points":345,"category":323},"41642151","blogtech",303,14,false,"v2",{"id":350,"name":5,"line":6,"ai":347,"cat":20,"year":13,"points":14,"comments":15,"rec":28,"s":351,"top":18,"kw":352,"maker":11,"domain":10,"tier":19,"attempts":33,"strip":353,"url":9,"mix":354,"praise":81,"objection":101,"sub":21},41647687,-0.18,[24,25,26,27],"1010101001010110150503501035030330300501",[31,32,33,34],1794036661708]