Change browser to display retina or webkit-min-device-pixel-ratio: 2 [duplicate] - css

How can you simulate a retina display (HiDPI mode) in Mac OS X 10.8 Mountain Lion on a non-retina display?

Search for, download, and install Apple's free Additional Tools for Xcode 8 (for previous Xcode releases search for Graphics Tools for Xcode according to your version).
Note: free Apple Developer account required.
Launch Quartz Debug application.
Go to menu: Window ---> UI Resolution.
Check Enable HiDPI display modes.
Quit Quartz Debug.
Open System Preferences.
Select Displays icon.
If using multiple display, select the configuration window on the display you wish to simulate HiDPI mode on.
Under Resolution:, select Scaled radio button.
Find a desired resolution postfixed with (HiDPI) and select it.
Your display is now running in HiDPI mode, simulating a retina display.
Source: High Resolution Guidelines for OS X

I found the following instructions. It seems to work, and it is much easier than the Quartz Debug approach.
"Enable HiDPI mode in Mountain Lion w/o Quartz Debug"
https://gist.github.com/3191869
In brief, run the following commands, log out, log on, and the HiDPI resolutions are available in the display preferences:
sudo defaults write /Library/Preferences/com.apple.windowserver DisplayResolutionEnabled -bool YES
sudo defaults delete /Library/Preferences/com.apple.windowserver DisplayResolutionDisabled
(In my case the first command was enough; the second command just prints an error message.)

Edit: (5/31/2016)
For users trying to do this on El Capitan, please read the FAQ on SwitchRes's website. Also, if something's still not working after you did all the steps in the FAQ, consider uninstalling and reinstalling SwitchResX. That solved the issue I was having on one of my laptops.
Original:
After reading through several forums, websites, blogs.
I am here to present a solution for users with 15" MacBook Pro with Retina display connected to a Thunderbolt Display.
First of all,
Terminal command of modifying plist
Quartz Debug
Holding option and select "Scaled" in System Preferences
ResolutionTab (Mac App Store)
These methods DO NOT work for MBPr with Thunderbolt Display, for whatever reasons.
You will not see the HiDPI options to be selected.
The only tool I found that actually gives us the options is SwitchResX.
However another problem exists here.
Most users with this setup, I believe, are trying to use 1280x720 HiDPI because it's half the native resolution of the TBD.
According SwitchResX's FAQ, in some cases it is not possible to set to this resolution because of a bug within OS X itself.
Here's a screenshot for your reference:
After contacting the developer, he presented a workaround - adding one more pixel - which worked for me.
Install SwitchResX and open it from System Preferences.
Go to Thunderbolt Display tab, and add a Custom Resolutions with Scaled Resolution at 2562 x 1440
Here's a screenshot
Save using command + s. (or simply close the window and use the prompt up)
Restart the laptop.
Go to SwitchResX and select the new custom resolution in the Current Resolution tab. (Sometimes it doesn't show up right away, play around with it and it should.)
Here you go.
I hope this answer gets to users with this setup because it is really frustrating to use 16:10 resolution on a 16:9 display.

For those unable to enable HIDPI on rMBP or new MBA, I experienced the same on my rMBP 15" with Air Display. I solved the problem by installing SwitchResX. With the boolean setting enabled as shown in the referenced gist, the HIDPI setting shows up.
Dragging seems a little laggy in Air Display, but otherwise works great.

Try this
sudo defaults write /Library/Preferences/com.apple.windowserver DisplayResolutionEnabled -bool YES
[from here]

If your monitor supports it, it may also be worth setting the DisplayPort version to 1.1 instead of 1.2.
I have a late 2010 Mac Air with a Samsung S27D850 display and had all sorts of intermittent resolution switching issues until I made that change.

As for me its pretty good app that give you opportunity for changing resolution any that you want.
SwitchResX for Mac and MacBook.
This app resolved all my problems with resolution.

Related

Issue with Rstudio version (Version 1.3.1073) "Giant goldenrod" when moving R studio window to new monitor doesn't display correctly

This is a basic question that I hope has a simple solution. When I move my Rstudio window to an external monitor display - it no longer rescales properly and instead is rendered completely useless - showing me only the lower portion of the window (see screenshot) and doesn't allow me to resize the window or adjust it in anyway to access the taskbar along the top. Has anyone else experienced this or have options for how this could be fixed?
I frequently need to shift my Rstudio window to different monitors, and I was doing this with no issue prior to installing the latest Rstudio version - so I am wondering if there must just be some setting that got reset when I updated the software, but I can't seem to figure it out. I have tried fixing scaling options in Windows by using the properties options on the Rstudio icon on my desktop - and then clicking on compatibility and High DPI settings, but messing around with that so far hasn't seemed to work. However I haven't tried all possible combinations as i thought I would check here first to see if someone could fast track this process for me. As you can see in the image - this display is impossible to work with. When I move it back - it works as it should. I am using Windows 10, and I update my software regularly. TY!
Update
Ok, I was able to reproduce on a Lenovo with an external Dell monitor and address the problem by applying a fix proposed in another Stack Overflow thread. See below:
Research:
https://support.microsoft.com/en-us/topic/windows-scaling-issues-for-high-dpi-devices-508483cd-7c59-0d08-12b0-960b99aa347d
Resolution:
There is a solution, it comes from the option "Compatibility" of the execute file.
Close all current RStudio windows.
Right-click on the shortcut of RStudio (or the original .exe file) and choose Properties
In the RStudio Properties pop-up windows, choose the tab Compatibility
Select High DPI settings
Tick on option Override hide DPI scaling... and then choose System from the drop-down list.
Apply > OK.
(Re)open Rstudio to see the change
On my test system, this addressed the problem observed where the menu text became super large.
Stackoverflow original reference:
RStudio HiDPI support
This appears to be an issue with the version of QT used by RStudio. RStudio is built on top of the QT engine.
QT tracking Issue:
https://bugreports.qt.io/browse/QTBUG-48242
the issue is marked as fixed in QT version 5.9.0 and above.
Recommendation:
Download RStudio preview and try that:
https://www.rstudio.com/products/rstudio/download/preview/
Why? The preview version of RStudio appears to use QtWebEngine/5.12.8, which implies the issue is addressed. If that does not resolve the issue you could file a bug with RStudio, or install and recompile RStudio from the source with an updated version of QT. You can check your QT version via the help, about box.
Hoping the above points you in the right direction. Stays safe and well.

Citrix mouse clicks off / not working High DPI / Scaling / Multiple Monitors

gonna answer my own question but this has to be more common and I didn't find anyone answering it. I connect to a lot of different clients running many backend versions of citrix and I try to keep my machine on the latest, resorting to VM's when i need a specific version (becoming more rare thankfully)
Anyway this latest issue I could use citrix light just fine but when i launched the ica file it would open and i could use the keyboard but i couldn't seemingly click things in the session and the i discovered upon closer examination that my mouse was offset when trying to click on UI elements in the session.
Resolution per this knowledge base article:
https://support.citrix.com/article/CTX230286
Was to set all monitors to the same scaling. I use 3 additional monitors to my surface laptop and the surface laptop defaults to 150% scaling and the others were 100%. I set my laptop to be 100% like the others and voila.
Things are really small on that screen now but i don't use it much and would much rather be able to run the citrix session properly on my other monitors.
Hope this is helpful.

Awesome WM wonky multi-monitor setup

I have a 3-monitor setup, except that 1 of my monitors is attached to a KVM switch that I switch between my computers. It seems like when Awesome WM starts up without the 3rd monitor accessible to it, it refuses to recognize it from that point on until the next reboot (simply restarting Awesome WM doesn't work).
The odd thing is, xrandr is aware of the monitor, and I can even see my mouse pointer appear there when I move it into the 3rd monitor, but the rest of it is black. Dragging windows there makes them disappear and Awesome WM does not render anything on this screen until the reboot.
I'm assuming this has something to do with how Awesome recomputes the screen geometry available to it but I'm not sure how to force it to recompute it? I've already enabled both secondary monitors via a couple bash commands I use:
xrandr --output DP-2-2 --auto --right-of eDP-1
xrandr --output DP-2-1 --auto --right-of DP-2-2
When I run xrandr --current, it claims all 3 monitors are connected and shows correct resolution for each. I did some searching, but there isn't much help on this issue, I believe it's a similar issue to the one reported here: https://www.reddit.com/r/awesomewm/comments/6rhvp9/switching_monitor_setups
How do I get Awesome to redraw into the 3rd monitor and use it correctly? Also, how can I get Awesome to dynamically handle addition/removal of monitors (this is a laptop connected to a docking station)? I tried screenful, but that repo seems out of date and seems to do more harm than good for me, with monitor flickering if I start with multiple and then unplug from docking station.
If you have a compositor like compton running, try restarting it after turning on the screen with (x|a)randr and optionally refreshing awesome.

iOS simulator weird "broken glass" behavior, App only lists contacts groups

I'm working on a two months old project that was working till today, without any changes except maybe XCode update from 4.4 to 4.5.
I use RHAddressBook to read contacts groups, which seems to be a very good framework, but got a weird behavior.
In this order :
Simulating in iOS5 iPhone non retina : app displays a black screen, weird log :
objc[31712]: Class _NSZombie_CFCalendar is implemented in both ?? and ??. One of the two will be used. Which one is undefined.
Simulating in iOS6 iPhone non retina : everything works fine, groups are loaded and displayed, no log
Simulating in iOS5 iPhone non retina : app displays contact list but their seems to be a broken glass effect on the simulator display, and neither top or bottom bars are displayed, weird log again
Here is my storyboard (root view in navigation controller) :
And simulator screenshot for the same screen :
And the second screen (simple segue opening blank page) :
If some idea crosses your mind I'd be glad to hear it !
Thanks a lot.
EDIT: seems like this is an iPhone Simulator bug, I will try reinstalling it. On another app (SYGalleryExample from SYGallery) it displays it as if it was on an iPad, with the same broken glass effect, and here is another app perfectly working on production use :
EDIT 2: Reinstalling XCode, wiping out ~/Library/Developer and ~/Library/Application Support/iPhone Simulator folders didn't do anything. Seems like I'm going for a full system installation again.
EDIT 3: even iphone simulator "native" apps are active weird. Here is proof :
Everything fixed, Apple bug somewhere in my user files for iPhone Simulator on iOS5. To recap : the display of every app I built was screwed up, including app that were working yesterday without any change done till then.
Then I spotted also native apps were not OK, design was the iPad one on the simulated iPhone non retina device .
Logging in another session, launching the same native apps (settings, maps, etc) everything was fine.
Logged back on the original session, everything works again.
Hope this can help some future reader.
EDIT :
actually no, still not working. complete new install of osx on new hard drive, no time machine restore or whatsoever, run working project on ipad 5.0 simulator and still :
For me it only reproduced on iOS5, iOS6 worked fine.
This is how i managed to fix it:
The problem was that i had installed SwitchResX, which is a program that creates display profiles for mac. This application interfered with the resolution of the iPad simulator.
So my suggestion is to remove any applications that change your resolution or try a different display resolution.

What tool can I use to test my web app in different resolutions?

Back in the past,
i found a third party webpage that was able to capture and save images of my website in different resolutions and browsers. Of course i have no more that bookmark...
So is there any webpage or application where i can see how my webpage looks like in different resolution?
And here are the resolutions i would like to check for..
1. 1024x768 24.56%
2. 1280x800 22.06%
3. 1280x1024 13.42%
4. 1366x768 7.10%
5. 1440x900 6.68%
Perhaps you're thinking of http://browsershots.org/ ?
Note that the screen resolution of the computer running the browser is only half of the truth. If the browser isn't maximized, it will be a lot smaller than the resolution you see there, and on non-Windows operating systems (Mac OS X, Linux) it's a lot more common to run applications non maximized.
It's simply best to make sure that your site is viewable in anything from small windows (just resize your browser down) to large.
If you want to check various resolutions and browsers, then BrowserShots may have been what you came across before, give it a look.
For viewing which percentage of people sees how much of your web page:
http://browsersize.googlelabs.com/
Also: Web Developer plugin for Firefox (Resize menu).
Chrome Extension and Firefox add-on to resize your browser to various standard resolution sizes...
There is one more online tool called ScreenFly which is very good and you can even check for tablets, TVs, mobiles.. screenfly
There are many utils available for watching your website in different resolutions.
Some are installed on PC, some are online services like these:
Adobes "render browser" - you'll need to create a free Adobe account:
http://browserlab.adobe.com
Nice, but not free if you want it fast as I recall it:
http://browsershots.org/
Google - shows what part of your website is visible based on statistics from Google:
http://browsersize.googlelabs.com/
But as far as I know, todays most commonly design resolution is 1024x768, eventhough the height isnt that important because of the popular scrollwheel on most mice/pads.
If you design to design for this resolution there is a lot of design help in the "growing standard" called 960 grid, which is based upon how many professional designers build a design.
You always make an invisible "grid" and then you use the cells to arrange the contents. Much like the old "table" system, but much more focused on professional designs.
Regarding your question, the % you list, seems like you would have most use of the "Google" link above.
Lastly, always remember to test how your website looks with the most used browsers. For me those 4 will be:
Internet Explorer (latest and previous version, use more than one computer to test if you cant do a double installation of it)
Mozilla Firefox (latest and perhaps previous.. but they make less changes in the render, so latest would be ok)
Google Chrome (awesome debugging tools too, and a very stable browser)
Safari (so you make sure that you support MacOSX)
Thats my opinion.
The Multibrowserviewer is a great (paid for) tool for multi browser support, I know it's not free, bt worth looking into even just for the trial period.

Resources