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/
Related
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
Good afternoon, I need a service desk type application with the ability to open tickets in different tabs. 1st way - We can use split screen in one browser tab, i.e. on the left there will be a list of tickets, and on the right there will be tickets opened by clicking from the list, and each click opens a new tab with a ticket. Or 2nd way - we can use browser tabs and open a new browser tab each time.
The historicity of the transitions within the tabs should also be maintained, since each ticket can be linked to others and we must be able to navigate between them in each separate tab.
What is the best way to implement this?
You can use a design system (or be inspired by) to implement de tab UI: Semantic UI, Material UI, and many others. And integrate this with React-router that can gives you the history.
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.
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 am following the hero tutorial on Angular's page. I have come to Routing step so far. Now my script does not work. I see only "Loading..." text as default template. There is an error in some file. But I cannot see where the script stops flowing.
I need to be warned/informed that the computer should tell me "there is an error in file 'somefile.js' at line 99".
I do not know how to find the line to be corrected. And I want to see where the app halts. Is there a way to find it on console or firebug or something else?
This is important when I start to develop my own scripts.
Can you have the web dev tools stop on exception?
with Chrome
open developer tools
open sources tab
click stop icon with || inside it (top right of dev tools above call stack)
This will cause your app to pause on all exceptions.
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 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.