Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I am currently developing website and trying to make it responsive. For tests I'm using Chrome Dev Tools Device Mode, where you can set resolution of any device.
The problem is that if you choose e.g. 1920x1080 px and use media queries to style it properly for that resolution it won't fit for user browser since user will have to browse it in full screen mode.
Is there any way to set device resolution to match given resolution browser height and width or are there any good practices of styling in such a way?
Any hints welcomed!
Don't use media queries for precise resolutions. In general, it is better to use one or some max-width and min-width conditions.
One good way is to define media queries for large, medium, small screens. You can check how bootstrap does this for example, with the corresponding breakpoints. Bootstrap breakpoints
For my websites, I start coding for desktop, and then try to reduce the window width until I see that the UI is not good for mobile. Then I take the width and create a breakpoint with it.
Related
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I'm wanting to submit an app to the store and I was wondering what pngs I'm meant to submit? I'm confused as there at least 60 different types of scales, for icons, splash screens, large tiles, wide tiles, small tiles. I'm almost overwhelmed with this information. Could someone give me a run through of what is required? for my app, I'm not wanting a small tile, or large tile, or any tile at all for that matter. So I'm seeking some answers as I am struggling to find resources outlining this specific case. I hope I've been clear enough; thanks.
Is this all mandatory? What must I fill out?
enter image description here
Is this all mandatory for a splash screen?
enter image description here
Is this mandatory to fill out? What if I don't want any tiles, can I leave it as is?
strong text
Please refer to the docs for an example of a minimal required package manifest file for a desktop application.
You only need to reference a 150x150 (large) and 44x44 (small) icon image and I think you may use the same image if you want to.
Otherwise, there is a tool in Visual Studio that creates images of different sizes for you based on a single file.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
I need to test a responsive website based on all screen resolution, as you know for example we can drag FireFox or Chrome browser size by mouse and resize page but I believe this is not correct way.
but please share your idea about it
.
There are also some websites that they provide same facility by checking website in all devices screen, but it's not trustworthy.
I need to know what is the best way and routine way to check
responsive website for all screen devices?
In the developer tool of mozilla firefox, in the top right portion click on the square icon to enable mobile mode.
read for more here, https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode
I've recently tried using browsersync and it works quite well.
BrowserSync essentially allows you to test your site across a network of devices, and what you do on one device is immediately visible on the others. Your scroll, click, refresh and form actions are mirrored between browsers while you test.
Here's the link: https://www.browsersync.io/
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
Im just begining to use polymer and i was testing to make a demo website using polymer components but i felt difficulty on making the pages responsive ?
Should i use css?
Thanks
Yep, you could use CSS. However, web components can be a bit tricky to get responsive because of their nature of re-use and possibly different locations.
Unfortunately, while CSS/media-queries are one solution, it's not the perfect solution. Why? Because the same component, depending on it's location/container may be desired to look/behave differently. For instance, a "voting" component in a primary content section (800PX wide) may display additional information vs the same component in a right rail (200PX wide) where just the question/answers may be displayed.
What we as web developers really need are "element queries", which allow components to react based on their occupying space (rather than the page-level layout). There are articles and polyfills regarding this that may be of interest to you. One can be found here:
http://www.smashingmagazine.com/2013/06/25/media-queries-are-not-the-answer-element-query-polyfill/
IMO, you should focus on Web instead of Mobile, because the native Android browsers before Android 4.4 doesn't support Polymer, even with Polyfills!
Anyway there is a core-drawer-panel, which is a responsive layout you can start with.
https://www.polymer-project.org/docs/elements/core-elements.html#core-drawer-panel
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
What is the best way to design a website and integrate web design for mobile devices within that website?
I heard the best solution is to simply create a separate CSS file...or redirect to another page that is designed for mobiles...
And are there any tools out there that make this task easier?
A lot depends on the complexity of the site. Many times your best option is to redirect to a mobile specific site. Frameworks like jQuery Mobile can be very useful.
There are multiple ways to achieve this.
You can use responsive CSS media queries to make the same page look different on different device sizes.
In case of standard CMSs like Wordpress/Drupal, there are plugins and themes which automate this for you.
Or you can use a third-party service like MobStac for Developers or Mobify to create a mobile version of your site.
Responsive comes with its own set of limitations; for ex. the markup and content being served to all devices is the same. It does not result in a lighter or faster site by itself. You should look at adaptive instead of plain responsive if you want an optimized experience across devices for your site visitors.
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 4 years ago.
Improve this question
I'm going to create mobile version of website...
What width should I choose for design? I know that every device have it's own screen width and it's really difficult to fit all devices...
I'm really confused (pretty new to mobile websites world), please help.
Thank you.
Your approach will depend on how much effort you want to (or can) put into this and what range of mobile users you want to target. For minimal effort, simply use 100% as KennyTM points out and expect your website to be browsed on screen widths from 128px to 480px . With this approach, you'll also need to avoid 'advanced' xhtml directives such as css and divs (and javascript) because most mobile browsers cannot handle some aspects of these. Plan to use tables to manage layout.
For a more advanced approach, you can use an open source project called WURFL (http://wurfl.sourceforge.net/) which is a database of mobile browsers and their capabilities (screen width, support for div, css, images etc...). It has a jsp tag library called WNG where you write once and the tag lib will render the most appropriate html to match the user's device. I believe there is also a PHP library for this.
Rgds, Kevin.
For this sort of question, I can highly recommend reading the MobiForge developers' guide. Lots of useful advice in there, including how to pick the compromises that inevitably result from mobile development.