Basically I am writing a web application (using Bootstrap so it's responsive) that will accessed using tiny hand held scanners specifically this one:
https://www.zebra.com/us/en/products/spec-sheets/mobile-computers/handheld/tc25.html
I need to make sure that the display works for both desktops and the handhelds so knowing this is important.
On there it has the display spec as "4.3 in. color WVGA (800x480); LED backlight; Corning Gorilla Glass"
Now when using chrome tools (emulated devices) I need to put the width and height in (I'm doing this to make sure the CSS is automatically adjusting correctly). Now what I need to know is the width and height.
I thought the first number (800) was suppose to be the width and the second number should be the height (800) but that can't be correct, unless they have put the spec back to front on their website?
I suspect that it should be in chrome tools 480 X 800 as that looks far more realistic. Would someone correct me here or point out if I'm missing something obvious?
Here is a picture of both devices configuration in Chrome:
And here is the other dimension (which is believe to be the wrong one!)
When I try to research this question or find out myself I keep being told the first dimension is the width which just doesn't look right.
And this is the picture is the device itself:
the first number represents the horizontally and the second one is for the vertically.
you can find out by dragging the responsive window and see which number changes.
Related
I was under the impression, that the units vh and vw deal with mobile browser zooming in, but apparently that's not the case and I think I am beginning to understand why. Zooming in does not change the viewport at all, but merely shows the user only a part of the viewport, despite the name viewport. Basically there is a difference between what you can see and the viewport. I don't know if distinguishing those two really makes sense, but that's how it seems to be.
The question is: How else do I "react" in my stylesheet to zoom changes?
For example, I have some html element with a width and it fits on the screen of a mobile phone. Now the user zooms in (doing that two finger gesture, moving the fingers away from each other). The size of the element should stay the same relative to what the user sees, but text should get bigger, because it might be the reason why the user zooms in. Maybe they couldn't read it before or want a link to be bigger, so that they can click more easily on it.
How would I do such a thing?
I've read about #viewport stuff, but it's not really supported yet and also poses the question, when to use which viewport size, how to make it as fluent as when you use vh and vw on a destop browser? Simple limiting "up to so and so much px of width" won't do. Defining a mathematical function for how much the element changes its size relative to what one can see and how much the text size changes would be great, but is probably not possible to have.
On mobile devices, the text-size-adjust property allows Web authors to control if and how the text-inflating algorithm is applied to the textual content of the element it is applied to.
As this property is non-standard, it must be used prefixed: -moz-text-size-adjust, -webkit-text-size-adjust, and -ms-text-size-adjust.
Browsers on smartphones don't display web pages using the same algorithms as browsers rendering web pages on desktop machines. Instead of laying out the web page at the width of the device screen, they lay it out using a viewport that is much wider than the device screen, usually of 800 or 1000 pixels wide. One of two possible methods is used to map back to the original device coordinates: either a smaller window is then used to display on the device screen only part of what is actually being rendered, or the viewport is stretched to the size of the device.
Its highly experimental though
On mobile, most of my client's website looks like the regular desktop page. It hasn't been made responsive, but it's being worked on. Since the body width is fixed at 1000px, it's all tiny text and stuff in your mobile browser. So that will be a double tap party to actually read the content.
So what is my question? I'm building a little notification bar for mobile. It's a little yellow bar that slides in from the bottom of a webpage, telling the user that the page they're viewing isn't optimized for mobile yet. Apart from the fact whether you'd actually want this, I'm trying to figure out how to make the fonts inside of the bar to have a consistent physical size on all devices. Problem is that all devices these days have a wide range of DPI. Another question I found on StackOverflow deals with this, but only treats the desktop case. Mobile is a whole different ballgame.
I've been meddling with mm in CSS, but the inconsistency in textrendering between browsers is beyond massive. I guess I could do it by calculating font-size in px based on pixel density. Or by writing a bunch of media queries for all DPI variations. But that all seems stupid. Am I overlooking something here? Is there an easier way to do this?
Use "em" as unit instead of mm or px. It adapts automatically to the font that the reader uses.
Example:
p {
font-size:1em;
}
I have a continuous form with many control elements ordered in two columns. The form is opened with the WindowMode 'acDialog'.
When I take a look at this form at my desktop computer there is no problem. But I want to use the application also on my laptop. When I open the form on my laptop, I only see the first entries, but not the others anymore. Unfortunately I havent found an opportunity to use scrollbars in my form.
What I have found is this (did not work):
Add or remove scrollbars
Edit:
The View should look like:
but on my laptop it looks like:
So I want to have scrollbars. The scrollbar property is set to both directions.
Edit 20121126, the design view. The blue part is header, the txts are in the detail view and the buttons are in the footer:
This problem has stumped me before. Access is not smart enough to realize if the screen is set to a different 'zoom' than 100%. So Access is thinking that the entire form is on your screen when really it is not.
This really only applies if you have Windows 7 and maybe 8, but I have no idea about that. If you go to your display property (right click the desktop and select 'Personalize' then Display in the lower left-hand corner of the pop-up.)
If you are not set at 100% then access is missing 25-50% of your screen. access goes off of pixels, which is set in the resloution, but when using 125% Windows expands everything by 25% and that can push things right off the screen. The form does not need scroll bars to fit on your screen, just need to set your zoom to 100%.
I found this out by having a 'control bar' set to be x-250 pixels from the left (where x is total left to right pixels). However one computer could never see the control bar and it was because the screen was +125%. I have never been able to figure out how to get the current 'zoom' from Windows. I have searched through all manner of API's. I hope this is the solution you were looking for! Good Luck!!
Can somebody please tell me the best way to deal with different window sizes and with a user resizing the window when creating a webpage.
Because I always find myself creating layouts with html, css, etc. and at first everything look perfect. But as soon as I increase or decrease the size of the browser window everything falls apart.
Also it would be great if anybody could point me to some sort of guide or anything similar.
Thanks it advance! Any help is greatly appreciated!
For detection, you may want to use css media queries (in which case you may want to to use https://github.com/scottjehl/Respond Respond.js's shim for older browsers, to add fuller cross browser support), and target certain screen widths. http://html5boilerplate.com and it's default css: http://html5boilerplate.com/css/style.css has a great default css set for exactly that type of media query.
Another approach is to give a fixed minimum and maximum widths to the outer container of the page. For example:
body{text-align:center;}
#outer-container{text-align:left;margin:0 auto 0; width:98%;max-width:900px;min-width:760px;}
that way you can grow and shrink it and see how it looks within a certain range and know that other viewing windows are going to see that plus a horizontal scroll bar at worst for small viewing.
In general, just using the html5boilerplate as a starting base is a great approach, it's an excellent piece of work.
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.