CODEWITHSUNDEEP
cssresponsive-designdata-visualizationresponsive
will
will

Reputation: 689

Responsive Design on Screens Bigger Than Yours- How Can I Do It?

So I'm relatively new to responsive design and I have a very newbie question. Essentially, how can I test how my code looks on devices larger than my own?

For example, let's say I'm building a data visualization with d3. I know I can open up the chrome inspection tools - and input some of the more popular screen resolutions (1920 x 1080; 1366 x 768), etc for responsive up at the top.

But let's say I'm using a 13 inch macbook. If I type in those precise dimensions at 100%, (let's use the 1920 x 1080 as an example here at 100%), it will automatically revert to 1330 x 558. How can I make changes to my css file to make it look good responsive-wise if I don't have some type of simulation to tell me how it would actually look on an actual device? If I use 1920 x 1080 at 50%, it still looks different than how I'd originally like (at 100%).

I know of sites like browserstack. But even when I test it out on their site, I can only adjust the dimensions so much.

I hope this post makes sense. It's been eating at me for quite some time now and I'm about to purchase a 27 inch macbook :/

Upvotes: 0

Views: 1536

Answers (2)

RustyJames
RustyJames

Reputation: 133

Browser zoom follows @media querys

Best practice is to design your site to look presentable at all resoultions.

But you should allways decide the largest viewspace for your design and set a max-width on your wrapper-element. This is fundamental to ensure a good user experience. Small resolutions limits to zero, hi resolutions is basically infinite.

If a user renders your site with a width: 100% on a hi-res full-scale projector your page could be several meters wide.

Use:

  width: 100%;
  max-width: 1920px; //2048px, 4096px or whatever you decide

If a user renders your site on a desktop, laptop, ultrabook, phone or what ever, the @media querys should serve the best UI for that resolution.

If you wish to see actual result use browser zoom.

Upvotes: 1

Sean
Sean

Reputation: 1

Try responsive design mode in Safari. Develop > Enter Responsive Design Mode. Also you can enter with shorcut option + cmd + R. There are side bars on the right and bottom. Just drag and set as you want.

Upvotes: 0

Related Questions