I noticed with the new update chrome added a lot of great features for web developers however when you had the developer tools open and dragged the screen it used to tell you the screen width size in the top right corner. Now it just has the measurement up top but it's very had to determine exact pixel size because it is ruler marks. Is there any way to get back the old exact pixel number of the screen width size?
I Googled around a bit and couldn't find much on this topic. Any help would be much appreciated as it helps me quite a bit in writing precise media queries. Thanks for reading!
I can suggest you this screen ruler. It helps me a lot. With it you can measure size of any object you want.
when using chrome you can get more extensions you can use this 'https://chrome.google.com/webstore/category/extensions?hl=en-US' or normally go to "customized and controller->settings->extensions->Get more extensions" and search any extension what you want.
thank you :)
Related
So, at my jobb im currently tasked with creating a preview panel for a ios message.
It needs to be "as exact as possible" so i was thinking using css pixel = device pixels / device pixel ratio for width and height. Would that be a good way to go? What would the scale for the fonts be if so?
I would not recommend going that direction. Every iPhone is of a different size. And some users might enlarge the text on their iPhones so that they can read it better. I would make it as responsive as possible.
This is a tool that I use when developing for different screen sizes: http://www.responsinator.com/
If you want to copy and paste your code here I can help you accomplish this.
I have a question what I couldn't find an answer for.
Google Chrome has an option to change screen size so you could see if your site is responsive. By setting it to 1366x768 it seems to be perfect, but if using laptop/changing screen resolution to 1366x768 it doesn't fit suddenly only if changing zoom value to 80%. I know I'm not providing any code here, just wondering why such thing is happening?
In my experience this has been due to using absolute pixel values and font sizes. I personally have found using em and percentages % rather than px helps at times as well as using a responsive grid system, whether directly coded in CSS or through something like Bootstrap. I would highly recommend Bootstrap as it is very easy to get into and will save you tons of time.
Is there a program that will show you guides, rulers so you can match your html layout in css to your Photoshop comp. What is best practices.
Right now I'm doing screen shots and using rectangle tool to get my measurements from the screen shot and see if they match the comp but this is taking so much time. I'm thinking there must be a program or something that can show rulers or measurements or even comp overlays with measurements to fine tune your css pixel measurements to.
Try the Pixel Perfect extension: https://addons.mozilla.org/en-US/firefox/addon/pixel-perfect/
Pixel Perfect is a Firefox/Firebug extension that allows web
developers and designers to easily overlay a web composition over top
of the developed HTML.
I find the FireFox MeasureIt tool handy for things like this:
https://addons.mozilla.org/en-US/firefox/addon/measureit/
https://addons.mozilla.org/en-US/firefox/addon/pixel-perfect/ as it was said before. And btw, you can measure distances in photoshop as well: sometimes you just need a value, not messing around with pixel perfect. Use rulers and the Ruler Tool (Shift+I until you get it) in PS. I combine measurements in PS and PixelPerfect addon in my work.
I know you can fake full screen by expanding a window and eliminating the title bar , status bar , and other stuff, I'm not interested in this, I want to know about "real" full screen mode (I don't know how to call it else) , like in games.
what exactly is full screen mode?
what win-api should I use to achieve this?
can this be used to play movies in full screen ? I know windows media player uses a fake full screen because I can "cut" thru it and see the desktop (using regions win-api).
can I "cut" thru "real" full screen like I thru a window (using regions win-api) ore is this directly writing to video memory and there is nothing "under" it?
Thanks!
If you want to make games on Windows in full-screen, the best option is XNA. This uses DirectX underneath, but hides a lot of the implementation details and plumbing to make it easy for the developer to start working on his game.
XNA is freely downloadable, and has good documentation.
XNA Game Studio 4.0 can be downloaded here.
...and you might want to support the "fake" fullscreen mode in addition to "real" fullscreen - it's very nice for those of us that run multi-monitor systems.
If you don't want to use DirectX, create window and call ChangeDisplaySettings with CDS_FULLSCREEN flag. OpenGL applications use this way to go fullscreen.
As far as a user is concerned, full screen is just when a window takes up the entire screen such that they no longer see any window borders or other desktop stuff.
As you know, not all full screens are created equal.
'proper' full screen is where the program takes control of the screen. When a game uses this mode, it can change the resolution of you screen. If you have ever played an old game and existed to see your icons all messed up, this is; for the duration of playing the game, your desktop was at a lower resolution.
with 'borderless full screen' the program window is striped of any borders, the title bar and frame etc., and is just a rectangle of pure rendering. If you then set this rendering context to be the same size as your desktop, you get the effect of full screen.
Doing border-less is usually the more user friendly way these days, as it is easier to 'tab out' as the other programs are still graphically around. 'proper' full screen gives you full control of the hardware, so in theory you have more power for your program, but it means you have to wait for things to reinitialise when you tab out.
what you do with your rendering context is up to you, so yes, you can use it play videos. It would not matter if you are in 'proper' full screen or not, the rendering code would be the same.
As for cutting through proper full screen windows, I am not sure, but I think there would be nothing else to see, there is only your program.
as for what win-api, there is only one windows api, but I think you mean, what windowing library; as this is getting to be a long answer already, I shall just say it depends a lot on what you want from it.
Please feel free to leave comments if you need me to clarify or expand on any points.
I know that it is possible for a website to detect a user's screen dimensions in pixels, but is there a way to detect the physical size of a user's monitor (in inches)?
This is not always possible. Even the operating system might not know this information. In order to display properly on the screen the necessary information is the resolution that the monitor can display.
Think about using a projector. Depending on how far you place the projector away from the wall, the screen will become bigger or smaller. However, the computer will send the same picture to the projector. How would the software know about the distance to the wall and hence the size of the screen?
Not reliably.
Even monitors that believe to know their DPI - which isn't many - are often incorrect.
You could use EDID from the registry.
Please vote for this suggestion:
https://connect.microsoft.com/VisualStudio/feedback/details/526951/screen-object-physicalwidthincentimeters-physicalheightincentimeters-displaymode