1

I have a site testing for compatibility issues and responsive designs on IE,Chrome,Firefox,Safari.

In Firefox the testing was completed with ease as it had the developer options and there by pressing the Ctrl+m gives you get the different resolution screen.

The same is not applicable for IE,Safari. Under Google Chrome I tried the Inspect Element and then the Toogle device mode and is slightly difficult.

I have to test the responsive design without using any tool so could you please suggest me on How the above can be done

Improve this question
2
  • 1
    Just minimize your browser little and then drag it from right side to left , it will be re size and you will be able to get exact thing like if site is responsive or not.
    – Helping Hands
    Apr 30, 2015 at 7:45
  • @helping I tried that already but you know that different resolution screen will have a different effect so the result is not matching with the one beside my system
    – user285oo6
    Apr 30, 2015 at 16:19

7 Answers 7

Reset to default
6

Yes , I have tested a responsive site into the Different browser.

  • In Google Chrome Browser to test the Responsive view press F12.-> Click on 'Toggle Device Mode' , Using this option we can select the different type of device mode.

enter image description here

  • Another option is we can add app which is "Responsive Web Design Tester", using this on right click menu Responsive Web Design Tester option is available with different device mode.

enter image description here

  • In Mozilla Firefox , Open Web developer tools (ctrl+Shift+I) is available -> Into the select Responsive Design View (ctrl+Shift+M) -> Into this option Different view is available of the different device. enter image description here

    • In IE 8 - 11 Responsive testing you can use site of the https://www.browserstack.com/ and also addon in firefox to check the IE Responsive as Below Snap.enter image description here
Improve this answer
1

Create a desktop background with overlapping boxes at the resolutions you need.

Resize the browser windows to match those boxes as needed.

Sometimes a lo-fi solution is the best.

Improve this answer
1

Update:You can use inbuilt mode in chrome browser for responsive design testing.

With help of device mode you can do following:

  • Test your responsive designs by emulating different screen sizes and resolutions, including Retina displays.
  • Evaluate your site's performance using the network emulator, without affecting traffic to other tabs.
  • Visualize and inspect CSS media queries.
  • Accurately simulate device input for touch events, geolocation, and device orientation.

  • Enhance your current debugging workflow by combining device mode with the existing DevTools.

  • Enabling device mode Turn on device mode by pressing the Toggle device mode toggle device mode icon off icon. When device mode is enabled, the icon turns blue and the viewport transforms into a device emulator.

You can also toggle device mode on and off using the keyboard shortcut: Ctrl+Shift+M (or Cmd+Shift+M on Mac).

Ref: https://developer.chrome.com/devtools/docs/device-mode

Alternative Options: You can right click on an element on a page and then select Inspect Element option from context menu.

Additionally I would suggest you to use chrome extensions for testing responsive design of your web application. Such as following extensions;

  1. Responsive Web Design Tester -

https://chrome.google.com/webstore/detail/responsive-web-design-tes/objclahbaimlfnbjdeobicmmlnbhamkg?hl=en

  1. Responsive-web-design testing tool-

https://chrome.google.com/webstore/detail/responsive-web-design/gkmaomcbenajgclicfopaempggmbghka?hl=en

Improve this answer
0

I would use a virtual machine and install the browsers on there, then you can resize or set the resolution of the machine to match the size you want to test on.

enter image description here

You can install your own operating system on the free VirtualBox https://www.virtualbox.org/

Or you can download free images from Microsoft which have a license for a couple of weeks. You will have to re-download then in a later stage. Its full versions of windows where you can also install other browsers on. Find them on: https://www.modern.ie/en-us

For mimicing mobile browsers on your machine have a look at: https://chrome.google.com/webstore/detail/ripple-emulator-beta/

Improve this answer
1
  • It's a system from workplace so I don't have admin rights to install and they will only support installation only if it's open like open office
    – user285oo6
    Apr 30, 2015 at 16:21
0

In Chrome you can check with the help of inspect element press F12 and select device symbol on that left side top.

then select device mode those you want to test.

Improve this answer
0

In Firefox you can check with the help of inspect element press F12 and select Responsive Design Mode symbol near to close developer tools,then write the resolutions that you want to test. eg: 1440x900 (MacBook Pro 15.4)

In chrome you can check with the help of inspect element press F12 and select device symbol on that left side top , then select device mode those you want to test.Here also you can write the resolution of devices.

Certain sites are also there for checking responsive designs.

Improve this answer
0

I suggest use the BrowserStack , they has more than 500 platform, I just pick the browsers, according to resolution. Also, I can call API, and automate testing by integrating with Selenium do check on local.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.