I'm learning more about Aurelia and while trying to migrate some layouts from HTML5 to Aurelia, I found that everything looks bigger when inside an aurelia template. Even the simplest layout possible, without any css styling or lib, looks bigger here compared with the raw HTML.
My monitor resolution is 1920 x 1080 and looking in Developer Tools, the HTML tag width is smaller (1920px width in HTML file vs 1280px in Aurelia rendered page).
I also tried my app in Google Chrome, Mozilla Firefox and Microsoft Edge and the only showing it how it should on both examples is Edge.
Here is a screenshot of same application on both browsers:
Playing with zoom on developer mode I discovered that if you put zoom: 1.5 on the left one, it gets the same size of the right one and zoom: 0.66 on right get the same of the left.
Does anyone know how to fix this? I'm getting crazy about it!!
Edit:
Here is another example with Chrome and Firefox. Attention to the sizes:
No css at all on these examples!
Since I didn't find why it was happening, I reinstalled my browsers and the problem is gone! I failed figuring out the reason it was happening but for now, that's enough for me.
Related
I am developing a static web app via React.js. I am using the google dev tool to inspect elements. In responsive design mode, everything is fine. However, when I select a specific mobile phone the footer element is not shown when I scroll to the bottom. However, it is visible on the console when ı inspect elements I can see the HTML info. I thought that maybe somehow I fixed the height for mobile devices or smt. Then I tried the firefox dev tool and I am able to see the footer. I have no idea which one is more realistic since I didn't deploy it yet. I deleted the history of browser before I tried.
More specifically; on the chrome dev tool when I select responsive design mode and change the resolution to 375x812 (same as iPhone X), I am able to see my footer. If I select iPhone x rather than responsive design mode, then I don't see it. It is more annoying that, both cases are okay for the firefox tool and I see my footer. So what is the problem ? Why two dev tools act so so differently for the same app and more importantly which one is true ?
Okay, I figured it out. There is a zoom option next to the width and height. It was 100% for my case, which should be "fit to window". I am leaving this dumb question here, it helps if any other beginner faces the same issue.
I have a user who is using my web app on a Surface Pro 4. The app doesn't render very well. The best way I can describe it is that it appears the browser window has been resized to a small size and it's trying to bunch stuff up. However, I believe he has his browser maximized.
Since I don't have a Surface, I've been trying to get both Chrome and Edge to emulate the rendering issues. Here's what I've tried:
Edge: Has a preset for the Surface Pro 4. I figured that once I selected this mode I would see the problem. It's actually the opposite situation. I actually have to expand the browser window to multiple displays to be able to see all the content (even the browser scrollbars). I suspect that's due to the Surface having a higher resolution than my PC.
Chrome: No preset for the Surface and I couldn't find anyone who had the specific settings. I tried 2738 x 1834 and all three of the built-in pixel ratios (1.0, 2.0, 3.0). Chrome zoomed out so that it all fit on my screen. It also had no rendering issues. Changing pixel ratio made no difference.
I'll admit that web UI development is not my strong suit. And it doesn't help that I inherited a lot of this code. But I'm really scratching my head here.
If I try to emulate with a phone preset, then I can see rendering issues because the app isn't phone friendly, nor does it really need to be. That seems to suggest the emulation in the browser is working fine. What's left? The only thing I can think is that he must be using some kind of scaling that's messing things up.
Also, I should note that I had a friend with an iPad (Sorry don't know what model) try the app out as well and he also sees the same bad rendering issues. In fact, he thinks it's rendering worse than the Surface.
Edit 1:
I put together a test page that shows the header from our app. It is here: https://app.astrolabe-analytics.com/surfaceTest
Here are screenshots of the various displays being tested:
Here is Surface Pro 4 Hardware - Notice buttons are wrapping
Next one is iPad Hardware (I don't believe it's the pro version)
Then here is the way I have Chrome set up to emulate the Surface Pro
Surface Pro 4 emulation in Edge. Note that I had to extend the browser window onto my second monitor to take the screenshot.
Finally, the standard appearance in Chrome
It seems that the emulation works well on my side. please check the following screen shots:
Edge emulation for iPad,
Edge emulation for Surface Pro 4,
Chrome emulation for iPad:
Chrome emulation for Surface Pro 4:
Besides, I also found that if we resize the browser window (change the width property), if the width is too small, the text will wrap or disappear. Please check this image:
So, I suppose the issue is related to the CSS style, as a workaround, you could try to set fixed width property (or using the min-width property) for the navbar-nav class, also, you could refer to the following links to use Bootstrap navbar styles:
Bootstrap Navbar
Angular Bootstrap navbar
I have a webpage that prints out tickets. I need the layout to correctly fill the paper. Im currently using this solution offered by LittleGnome. It works fine in Firefox, but in Chrome and IE the layout is messed up. The scale is too big and the content is spread over 4 pieces of paper instead of one.
When i used chromes dev tools to debug the print layout, it seemed like chrome cannot handle the flex containers correctly. All the elements on the layout have a size of 8000X4000 pixels, which is totally wrong. What might be causing this and how to fix this?
JsFiddle for the current version
Im practicing how to create a responsive website using bootstrap. Everything was fine when i tested my site on Firefox and Chrome using the Resizer extension but when i tried to view it on Safari theres a very small but obvious discrepancy with the bottom padding in one of the boxes(the purple one with the greater than sign). Ill attached the pictures to show what i mean.
Firefox view using Resizer Extension
http://i168.photobucket.com/albums/u173/carlocarr/ScreenShot2013-11-01at52435PM_zps8da019a9.png
Safari view using Developer tools
http://i168.photobucket.com/albums/u173/carlocarr/ScreenShot2013-11-01at52455PM_zps587313c1.png
Is there any Safari Mobile specific CSS?? what should i do? help!
i heard stories that w3cSchool isn't the best resource (due to inaccuracies) but i feel this may be of some use to you. it seems that the image is being cropped but take a look at this and see your own CSS3 code to identify the issues, you may also have to consider using relative positioning as opposed to absolute.
http://www.w3schools.com/cssref/css3_browsersupport.asp
also, take into consideration that while some browsers may seem to "now" support the features of CSS3, you need to also check for to version compatibilities. You can set up your site to use specific CSS3 features depending on the versions.
so I have a site that's not nearly done yet (eklinik), and its breaking on the iPad (iOS in general actually)... Things like the footer doesn't stay fixed, there's extra padding to the right, a div that's supposed to be a 100% width/height isn't, and so on so forth...
Now, I'm not asking someone else to clean up my mess (despite how nice of a thing that would be), but I am asking how can I start troubleshooting the website on the iPad...? For desktop browsers, I can always bring up the dev tools and see what's breaking where...
I do not own a mac based system, I do have an iPad though... The Dev console in the iPad is only looking for JS errors (mostly) and doesn't show anything...
Any suggestions will help... Thanks...
PS. The site is only going to run on the latest browsers:
Chrome 12+
Firefox 4+
Opera - 11+
IE 9+ (barely)
Safari 5+
If you do feel generous, and do want to point out mistakes (optional) I might have made, along with possible solutions (optionally optional), then feel free to drop me a line - abhishek#live.com.my... :-)
The question's old, but a good solution for this has come up:
Adobe Shadow
I've had quite a few clients recently that wanted their sites to be "mobile compatible" and the best solution for checking code/css on iPad is Firebug Lite:
http://getfirebug.com/firebuglite
I believe you can upload and include the javascript in your site and then automatically turn it on using a simple attribute in the html tag ( see their docs for more info).
You can also install the bookmarklet in your iPad bookmarks using this method here:
http://osxdaily.com/2011/12/02/run-firebug-on-ipad-or-iphone/
I use it using the bookmarklet method and it works. Unfortunately it is a little hard to navigate, because it doesn't handle the touch controls very well (it has trouble distinguishing between a 'hover' and a 'click), but it's better than nothing.
Regarding your actual problem, it sounds similar to an issue I recently had on one of my sites. Did you set your viewport tag? if your site is normally 960px wide, and you have a div that is using width:100%, it will look wrong on the iPad because the window on the iPad is technically only like 600px wide. So the browser thinks width:100% is 600px instead of 960px or larger. If you set the viewport to 960px, then iPad Safari says, "oh, my browser window should be 960px (instead of 600px)," and resizes accordingly.
Hope that helps!
I use weinre to test on mobile devices, not just iPads, and it works wonders.
If you carefully test in your PC with chrome and safari as well until you get consistent results I would expect iPad or Android tablet to render "nearly" the same...
About javascript errors you should of course avoid and fix them, are you using jQuery or any other intrinsically cross browser js framework? if not, you should! :)