X
Tap here to go to the mobile version of the site.

ஆதரவு மன்றம்

Can FireFox show a mobile device frame in responsive design mode?

  • 2 replies
  • 1 இந்த பிரச்சனை உள்ளது
  • Last reply by jscher2000
பதிவிடப்பட்டது

In Google Chrome, when switching to Responsive view, there is a setting available called "Show device frame" and "Hide device frame". This is a great little feature that will show the selected mobile device frame around the web content (eg will show an iPhone around the content if you select "Show device frame"). It's fantastic for demonstrating/presenting etc. Is there any way to do this in Firefox? Either through the default product, or any add-ons?

In Google Chrome, when switching to Responsive view, there is a setting available called "Show device frame" and "Hide device frame". This is a great little feature that will show the selected mobile device frame around the web content (eg will show an iPhone around the content if you select "Show device frame"). It's fantastic for demonstrating/presenting etc. Is there any way to do this in Firefox? Either through the default product, or any add-ons?
Attached screenshots
மேற்கோள்

Additional System Details

பயன்பாடு

  • User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:68.0) Gecko/20100101 Firefox/68.0

கூடுதல் தகவல்

jscher2000
  • Top 10 Contributor
8633 தீர்வுகள் 70605 பதில்கள்
பதிவிடப்பட்டது

That's some nice eye candy. ;-)

Well, a request for enhancement was filed a couple years ago and it's sitting there waiting for a motivated person to pitch in (bug 1278131). Would you be interested in helping code that up?

For discussion on how best to move it forward, I suggest starting with the DevTools forum: https://discourse.mozilla.org/c/devtools

That's some nice eye candy. ;-) Well, a request for enhancement was filed a couple years ago and it's sitting there waiting for a motivated person to pitch in (bug 1278131). Would you be interested in helping code that up? For discussion on how best to move it forward, I suggest starting with the DevTools forum: https://discourse.mozilla.org/c/devtools
இது உங்களுக்கு பயனுள்ளதாக இருந்ததா?
மேற்கோள்
jscher2000
  • Top 10 Contributor
8633 தீர்வுகள் 70605 பதில்கள்
பதிவிடப்பட்டது

As a very basic-looking workaround, you can inject borders into the responsive design view using an optional userContent.css file. This file is a cousin of the better known userChrome.css file used to modify the user interface. An example screenshot (the third) is attached for inspiration.

If you want to give that a test, when you have a spare 10 minutes:

This assumes you do not already have a userContent.css file. If you do already have a working userContent.css file, you just need to add the rules under (A) to your file.

(A) Select and copy the following style rule code

/* Use CSS borders to create a faux phone frame */
#viewports-container .resizable-viewport {
  border-color: black !important;
  border-style: solid !important;
  border-radius: 20px !important;
  border-width: 45px 16px 75px !important;
}

/* Move the frame closer to the settings bar */
#viewports-container #viewports {
  margin-top: 4px !important;
}

(B) Generate and download a userContent.css file

Open the following page and paste the above rules into the editor, replacing the sample rule:

https://www.userchrome.org/download-userchrome-css.html

Then change the file name selection to userContent.css and click "Generate CSS File". Save the userContent.css file to your computer. (See first attached screenshot)

Use the downloads list on the toolbar to open the downloads folder directly to the new userContent.css file. (See second attached screenshot)

Minimize (don't close) that Windows Explorer window for later reference.

(C) Create a new chrome folder in your profile folder

The following article has the detailed steps for that (#1, #2, and I recommend #3)

https://www.userchrome.org/how-create-userchrome-css.html

I have videos for both Windows and Mac in case the text is not clear.

(D) Move the userContent.css file you generated in Step B into the chrome folder you created in Step C

The next time you exit Firefox and start it up again, it should discover that file and apply the rules to the responsive design view.

Success?

Now... using border images sliced from an actual device would definitely make this prettier, but someone else would be better able to work on that than me.

As a very basic-looking workaround, you can inject borders into the responsive design view using an optional userContent.css file. This file is a cousin of the better known userChrome.css file used to modify the user interface. An example screenshot (the third) is attached for inspiration. If you want to give that a test, when you have a spare 10 minutes: ''This assumes you do not already have a userContent.css file. If you ''do'' already have a working userContent.css file, you just need to add the rules under (A) to your file.'' '''(A) Select and copy the following style rule code''' <pre>/* Use CSS borders to create a faux phone frame */ #viewports-container .resizable-viewport { border-color: black !important; border-style: solid !important; border-radius: 20px !important; border-width: 45px 16px 75px !important; } /* Move the frame closer to the settings bar */ #viewports-container #viewports { margin-top: 4px !important; } </pre> '''(B) Generate and download a''' <code>userContent.css</code> '''file''' Open the following page and paste the above rules into the editor, replacing the sample rule: https://www.userchrome.org/download-userchrome-css.html Then change the file name selection to userContent.css and click "Generate CSS File". Save the userContent.css file to your computer. (See first attached screenshot) Use the downloads list on the toolbar to open the downloads folder directly to the new userContent.css file. (See second attached screenshot) Minimize (don't close) that Windows Explorer window for later reference. '''(C) Create a new''' <code>chrome</code> '''folder in your profile folder''' The following article has the detailed steps for that (#1, #2, and I recommend #3) https://www.userchrome.org/how-create-userchrome-css.html ''I have videos for both Windows and Mac in case the text is not clear.'' '''(D) Move the''' <code>userContent.css</code> '''file you generated in Step B into the''' <code>chrome</code> '''folder you created in Step C''' The next time you exit Firefox and start it up again, it should discover that file and apply the rules to the responsive design view. Success? Now... using border images sliced from an actual device would definitely make this prettier, but someone else would be better able to work on that than me.

jscher2000 மூலமாக திருத்தப்பட்டது

இது உங்களுக்கு பயனுள்ளதாக இருந்ததா?
மேற்கோள்
கேள்வி எழுப்பு

You must log in to your account to reply to posts. Please start a new question, if you do not have an account yet.