We’ve been looking for reporting components, and we’re having difficulty a report designer that will render reports properly on both phones and computers. We want the report to display in the same way on different screen sizes (desktop and phone), or at the very least, display on both without clipping on the phone. Our thought is the easiest way to lay out such a report is for the report designer to specify table and column sizes as a percent of the width (sort of like HTML tables) rather than hardcoded pixel sizes. So when my page is resized, my report (and content elements) also gets resized, and it continues to fit.
We tried Telerik Reporting but unfortunately they don’t support this feature. They also don’t support the feature where report is resized when window is resized. The size you lay out is the size it is. They indicated they have something that will come out in beta soon, but have given us very few details. We tried the demo for Infragistics, and it seems to have the same limitations.
Is there anything else in the development space that will allow us to produce reports with more “fluid” layout, or in the very least, zoom in on the phone instead of clipping?
is twitter bootstrap an option? tb supports responsive design which will make easier to adapt your report to any device, you just will need to adapt your media queries
kendo ui supports responsive design you may take a look, if bootstrap is an overkill you should try a separate jquery UI or JS library that helps you out with a fluid layout
hope that helps
Related
I've built flat page sites for years, largely with table architecture, and I know they must become more mobile compatible.
However, I actually WANT some of my non responsive sites to display in mobile screens as simply reduced-sized versions of themselves.
In an effort to understand the basics, I've created a simple page, no tables, one piece of art, and the meta tag which I understand is supposed to reduce a large size HTML page to fit within a mobile screen. But when I check this in a mobile screen emulator, my page is huge with just part of itself showing in the mobile screen. It's not reducing so that its full contents show within the screen.
What's the basic concept I'm missing?
http://ldihealtheconomist.com/html5-test-single-col.html
You're using a set width.
No matter what screen you're using, if you set the width as pixels then it will be displayed as that many pixels.
No offense, but if you've been making sites for years and don't know this, then maybe it's not the right thing for you...
Read up on #media queries, vw,vh and viewport widths.
Look at frameworks such as Bootstrap or Skeleton.
I'm newbie for developing mobile website. I very confused between two methods because I dont have any experience this it. Whats more better between two methods: css query when we using all of width device in css file or using jquery mobile that use php technique for differented user that use desktop or mobile [user->php?->mobile use jquery mobile/desktop use css standard]?
Many thanks for this answer
I will classify methods by their importance, from most important one to less important:
Client side detection
Using Modernizer javascript library to detect mobile / desktop environment
Server side detection
Using Modernizer Server or WURFL. Little complex then first solution but much more detailed (if you need more data about used device)
CSS media queries
Bad solution to detect desktop /mobile devices. Current mobile devices can have screen resolution equal to desktop platform
JavaScript based browser sniffing
Worst solution possible. Specially if you want to make distinction between smartphones and tablets.
To find more about this solutions, read my other article/answer with examples: https://stackoverflow.com/a/15055352/1848600
I have to post an answer in here since this comes first in search engines and accepted answer is not accurate.
There are two main concerns regarding responsive designs:
Content: Content should be restructured based on the width/height of the view port so the user can view the content without the need of constant zooming in and zooming out. This needs to happen solely based on the resolution of the view port regardless of the device. It could be a mobile device or a small window in desktop. This mainly involved the look and feel of the website and it is absolutely fine to use media queries. Even IMHO it is the best to use media queries to have the separation of concerns between your view and logic. No web designer likes to see random width or height showing up on their html elements during debug without knowing where are they coming from. Media queries will help you to resize the elements and show or hide them; however, in some situations you may need to move elements around; I usually do these using ng-if or ng-switch in angular js in combination with modernizer.
Functionality: If you need to turn on/off features based on the device functionalities, do not depend on the viewport specifications; use the vast libraries available in JS.
On a side note smartphone browsers seem to render at far lower resolution than actual device screen dimensions. Bust out a quick JS to show you your window resolution and run it on your phone.
Example: Chrome runs at 360x640px on my android screen of 1440x2560px.
I'm trying to present my notecards in a web app style.
I'm not worried about caching, or making it work offline.
I just want it render well in the iOS browser.
Here's the link: http://kaninepete.com/flashcard/review.php?Sec=3
I want it to look the same as if you re-size your browser window to 320x480.
The problem is, it always renders a huge amount of blank space off to the side.
I want to lock the scrolling to only the vertical axis (like flipping through notecards),
but also have the text at a readable size.
You can use CSS media queries to set your template on a certain width/height model. This works well and can adjust specifically for iPhone screens.
As for the font size issue you'll probably need to just spend time testing. With that it's going to require some type of virtual simulator or a real iPhone where you can test the site. I just loaded it up onto my iPhone 4 and I see what you mean about additional space - this is just because of your page size. Try messing with CSS media queries I think you'll find the answer in there.
Here is a very handy Google search to hopefully get you started on the right track. CSS3 has a lot of new features. Many of them geared towards mobile :)
Reading your question again, here's some suggestions based on what I think you're looking for.
Make sure your document is valid HTML before you continue. Safari on iOS supports HTML 5, so I'd suggest targeting that, unless your platform targets something different already.
If you just want it to run well in iOS Safari, then code for that. If you want it to look similarly in other browsers, however, then it may be necessary to look at styles targeting the iOS device (via width/height). See http://davidbcalhoun.com/2010/using-mobile-specific-html-css-javascript (It seems hacky, but based on some research a week ago, this still seems to be the suggested route.)
You've got CSS that shouldn't be in there if you want to target multiple browsers. overflow:hidden and set pixel widths.
Generally, I'd say you'll want to tweak your markup as well. List items or headers would be much better than just simple breaks.
Maybe I'm just oversimplifying the question, but it looks to me like all you really need to do is wrap each notecard in a div, perhaps giving each div a <div class="notecard_wrapper">. then just attach a stylesheet that specifies the width and height you want for each card.
This page explains Safari's viewport and how to change it. It will probably fix the font size problem and maybe help with the page size.
Basically, Safari by default simulates a screen that's about 900px wide, when it's actually about 300px (so the page appears zoomed out). This makes pages designed for real computers render properly, but for a web app you usually don't want it to zoom the page at all. The viewport tag should let you control that.
I have created my webpage in asp.net in 1024*768 resolution, my problem was that when i change my monitor resolution then the controls in my webpage will be displayed in unmanaged manner .
How to arrange items in my webpage which support multiple resolution ...
Whatever the resolution of my monitor the controls in my webpage will display as it is as managed in 1024*768 reolution !
This really has less to do with .NET and more to do with website layouts. It sounds like you have a lot of inline HTML elements which wrap in a specific way at a specific resolution, but wrap differently at different resolutions.
Do you always want a defined width supported by 1024*768? If that's the case (and often is in website design) then you can simply wrap your content in a div with a width set to the specific pixel width desired.
Furthermore, however, you'll want to get a good book on CSS and learn about that. The Zen of CSS Design is a pretty good book on the subject, and similarly you can look through the CSS Zen Garden for inspiration and examples. It's an extensive subject, but critical for good website design.
This issue is obviously bigger than I thought! Using the VS2008 form designer for web pages, it'd a doddle to lay everything out using pixels. In fact, as far as I can tell, it's very hard to use absolution positioning and anything but pixels.
So my webapp has developed nicely until somebody mentioned the 120DPI issue and I've wandered off into another field which I've managed to kind of ignore.
I'm the person who thinks if you get a bigger monitor, it's because you want to display more windows on there with the same size text, not make everything bigger because you're 40 and your eyes are playing up ;-)
Given that there isn't a way for the designer to lay things out in anything apart from pixels, is there is half way house? I'm not about to go through every inline style changing from pixels to em values. Sorry, but that's just too much work for a volunteer written webapp.
Is it okay to keep pixels for the layout of text boxes etc. but switch to using some percentage based system for fonts? Will that size correctly?
This is only a problem in IE7. IE8 looks at the DPI setting and scales the x,y,w,h values as required. I appreciate this is both right and wrong at the same time. IE8 now works correctly with 120DPI where fixed pixel sizes have been used.
Cheers, Rob.
Have you considered not using such strict control over your sizes? In general, you will probably find it much easier to specify as few sizes and positions as possible. HTML is designed to handle size and position dynamically. The less you specify explicitly, the more able the browser is to arrange the page as needed to fit the user's browser size and viewing preferences.
Anyway, if you really must make heavy use of fixed positioning and such, I highly recommend you not use the visual designers in visual studio. They are very much NOT up to the task. I'd recommend looking around for other designer tools that handle the WYSIWYG stuff better. While I'm not a fan, dreamweaver does a respectable job with absolute positioning and has at least some support for aspx too.
Might I suggest using the YUI 'reset-fonts-grids.css' CSS from Yahoo, then you can use EMs as your units for fonts meaning the user's browser can decide how large or small to show the text.