I was creating a page and want to have css accordingly to browser window size. Is there a tool (maybe in f12 developer tools?) that could show me exact pixels when I am resizing a window so I could set a particular style for that size of window?
For example, I write:
#media ( max-width: 768px) { .picture-to-hide {display : none; } }
But when testing my page I see that I would like to hide the picture earlier. How do I know exact pixels? Just by try and fail method of trying different numbers? Or maybe I can see pixels in developer tools somewhere?
Thank you in advance!
When it comes to your display on Windows 10, in your Laptop’s Settings Panel, you should find all the relevant information. To get there, go to the Search panel in your Taskbar, and write “Display”.
Once you enter the “Display” word, Windows will suggest opening the “Display Settings”. Select then “Open Display Settings”. The system will show you all the options for Display. Look for the “Advanced Display Settings”.
Once in “Advanced Display Settings”, Windows will show you information like monitor resolution, Model of the Video Card, Color format and size of the screen.
If you are doing responsive designing i suggest you to try webdeveloper mode in mozilla firefox where you can change the screen size accordingly .Shortcut to switch onto resposive web design mode in mozilla firefox : Ctrl+Shift+M
Related
I am developing a H5 Canvas game using PIXI js.
I am struggling in implementing the ios Safari swipe up to full screen message.
Added a new div with window.width + 1000 px.
It does remove the safari address bars but i am not sure when to remove the div. i.e. i am not able to identify if i am in full mode or not.
Also, what should i do to get back the div enabled if someone accidentally or forcefully comes out of full screen mode?
I am open to use any opensource lib as well but wasn't able to find one except screenfull.js which doesn't supports safari mobile
I am creating an AMP story for my project with fullHD screens. I am trying to disable the "fullscreen mode" which is automatically turned on when the browser has some specific resolution. I need to get only fullscreen story without the background and buttons etc. I use screen 9:16 (1080x1920).
Example:
https://people.com/amp-stories/royal-a-to-z/
Screenshots:
Right - https://drive.google.com/file/d/1PZmG1HOfC7TkwEgD-xTeWfalI-kkaVaD/view?usp=sharing
Wrong - https://drive.google.com/file/d/128Qcg4cl4H2pUC0TxYvPG0vg_PIXPJML/view?usp=sharing
It is not currently possible to control which experience is used from the source code of the story; these default experiences are baked into the JavaScript of amp-story. If you are hoping to use this in e.g. a kiosk environment where you are looking to modify the behavior in a single browser window, you can increase your browser's zoom level to accommodate the larger screen resolution, and the desktop experience should not get triggered.
I have a general question regarding css:
i want to add media queries to adapt to different screen sizes. But how do I know what values to give the different queries if i cant see it on the respective screen size?
is there a way to do preview how my content will look?
You can google chrome's inspect tool by clicking right on a webpage and click the little phone icon in the top left corner to view your website on various device sizes.
You can enter Chrome's (or Opera's) dev tools and activate Device Mode to simulate different screen sices. I like to use the responsive mode that allows you to drag and resize to check the behavior across different sizes and the Media Query ruler that shows you the CSS break points.
Other browsers have similar tools, like Firefox's 'Responsive Design Mode' or Edge's 'Emulation', both accessed through Inspect Element.
Yet this simulations don't guarantee to behave 100% like the devices.
Most modern browsers have device emulators in their Developer Tools. For Chrome you can find the documentation here: https://developers.google.com/web/tools/chrome-devtools/device-mode/
For even more cross browser/device testing you can use: https://www.browserstack.com/screenshots
Still nothing beats setting up a device lab, where you can physically test on some of the most popular devices.
Hope that helps,
You can use tools like this, to test it in different devices size and resolution.
https://screenfly.org
I've made a responsive web page that looks really great when resizing the window manually but doesn't look so great when using the responsive tool embedded in chrome. So I decided to design according to what it looks like on Google Chrome responsive tool, but now it looks awful when I resize the window manually.
Which one should I trust ?! How do I know what It will look like on mobile?
Edit: Also, I have this basic rule
#media only screen and (min-device-width: 900px) {
body {
width: 60%;
margin: 0 auto;
}
}
The body width will correctly resize while using chrome responsive tool, but will not when resizing chrome window. If I change it for min-width : 900px, the body will correctly resize while resizing chrome window but not with chrome responsive tool!
On the left this is the responsive inspector tool provided by Chrome, on the right this is the chrome windows being resized ( both are the same width ) while using #media only screen and (min-device-width: 900px)
The media query doesn't work here ( on the inspector ) but does work while resizing the windows
Same thing here but using #media only screen and (min-width: 900px) . The inspector tool displays the page Ok, but whenever I resize the Chrome window the query doesn't get triggered!
I know I am late to answer but hopefully this can help others having a similar problem. I am mainly going to respond to your first bit:
I've made a responsive web page that looks really great when resizing the window manually but doesn't look so great when using the responsive tool embedded in chrome. So I decided to design according to what it looks like on Google Chrome responsive tool, but now it looks awful when I resize the window manually.
Which one should I trust ?! How do I know what It will look like on mobile?
Like Relisora said, definitely trust the responsive tool over the manual window resize!
But it's still frustrating that manual resize is different than the developer tools.
To make sure the page looks the same/ similar on both the responsive tool and manual resizing, try using the viewport meta tag!
put something like this in your html head:
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0">
further explanation from Mozilla
I accord a lot of importance to the chrome responsive tool in the development tools.
However sometimes neither of resizing or the responsive tool are working (while using it on responsive settings).
The only tool that never failed me is when you emulate the device into your responsive tool :
Access it by : F12 -> Settings -> Devices
The list is quite complete but it's not a general case where you can test everything. It still should be enough for the majority of devices.
Edit :
If the device you want to test is not in the list, you can add it by clicking "Add custom device" and make sure you complete all the elements :
EDIT2 :
The inspector is working while simply resizing is not because there is a variable you don't take into account while using simple resizing : the resolution.
This variable is known by the inspector when you select a device and this is why the rendering will be the exact same as if you used an actual device.
The inspector will display what will be rendered on mobile.
I am using a modified version of the Quintus Theme in a self-hosted WordPress site. The site appears and works great on all browsers that I have tested, a windows tablet, and a windows phone. When I view the site on an iPad running the latest iOS version, the site is being squished to what I would assume is between 700-800px wide... all except for my custom header and slider. The blog title, menu and everything contained within the #page is not showing full width. I have beat my head against a wall trying to locate this needle in the haystack to find what could be causing this to display short of the width. I even tried some iPad emulators, however all those display the site perfectly. The actual iPad is not. I am not sure how to inspect the elements on an iPad since there are not any options on an iPad broswer to do so. Can someone please help me?
Blog... http://blog.modafabrics.com
Using the chrome emulator, i can't see any responsive CSS being used.
Your big slider area in the middle is set to a width of 1000px, whereas a iPad's resolution is only around 1024 x 768px. When in portrait you will be missing almost a quarter of the screen size.
The best way around it would be to start using percentages once you hit 1024px and to start making it responsive so it works on all devices, mobiles included.
Have a read on the MDN about media queries which are what are used in responsive CSS.
Link: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries
EDIT
Ill see if i can get you started on making things a bit better.
These are all changes needed within your css which need to be applied within the media query for tablets
#page {
overflow-x: hidden; // stops the page being slid to right
}
#primary {
float: none; // removes the float style from the element (things can go above/under it otherwise)
}
#content {
margin: 0; // makes it full width
}
You will then need to decide what your going to do with the sidebar e.g. hide it or drop it below the content.
That should get you started on it. The best way to continue would be to use the chrome inspect element tool, you can then dig into each layer of the template and see why different things aren't re-sizing.