So I built a Chromecast receiver -- which is just a web app that can communicate with another device.
When I display it on the cc it sometimes puts a dark tint over the picture with weird boxes of no tint around my elements. The element margins are far smaller than those clear boxes. In fact, there are no elements that have margins or padding that looks like these clear boxes.
This only happens on Chromecast. On my chrome browser it doesn't happen. I use Materializecss as my stylesheet if that matters.
Related
I have a problem that I can not solve, in Android devices when you put text in the input,
so due to the appearance of the keyboard,
all the elements are popped up - I attached pictures.
How can this problem be solved?
How can I turn off the default css settings of browsers in Android? Because in iOS it works great
Thank you :)
Popping up keyboard is resizing Activity by default, thus it has less space so web content also, and it looks like in your case web content still trying to "fill whole space" trying to align to bottom, center etc. - that depends of params set in CSS
Consider preventing this Activity resizing by android:windowSoftInputMode="adjustNothing" line in manifest
<activity
android:name="your.package.activity.WebActivity"
android:windowSoftInputMode="adjustNothing"
... rest of params
with this line your Activity won't be resized, instead of that keyboard will show up "above" your View (so will cover half of content). you can also try with adjustPan value, for sure not adjustResize. some doc in HERE
I am having a frustrating CSS problem. I am building a a single page JS map application and am trying to synchronize styles across browsers/devices. I thought I did a successful job using Responsive Design Mode in Safari/Firefox. It looks the same to me when I switch between iPad/Galaxy/iPhone/desktop in the browser emulator.
However, when I actually open the page on my phone in Firefox/Safari, it does not appear the same. Specifically, the ? button is wider than the rest of the buttons below it. I specifically have the width property explicitly set to 40 pixels in the CSS.
What is happening here? Why is the ? button wider?
Here are some screenshots of what I mean:
Desktop
Desktop/Responsive Mode iPad
Desktop/Responsive Mode iPhone
My actual iPhone
I tried connecting my phone using Remote Debug but I don't really know how to use it without visualizing the actual phone screen so I can't see what I'm editing. Anyone have any ideas?
I found the problem. For some reason, padding was being added in iPhone and not in responsive mode or other browsers. Adding padding:0 to the button fixed the problem.
I have a web page that I am trying to make "friendly" to touch devices. With the proliferation of devices with medium sized screens (small tables, large phones) my approach is to make one responsive layout with CSS and javascript tweaks where necessary. This is going pretty well, but I'm wrestling with select controls.
On my android phone and android tablets, the browsers that I've tested render a friendly large dialog when I touch a select control (I still need to test an Apple device), but on a Windows 8 touchscreen laptop, I am left trying to click the little select options. Other than just making the select control a very large font, is there already an established way to make the select more friendly?
I'm thinking of detecting ontouchstart then creating a pop up div with buttons or styled hyperlinks to give an experience like that provided by Android - but then I'd need to disable this on browsers that already handle select controls well...
Anyone have any advice? (I don't have any code yet, and this would apply to any select control)
The most friendly way to deal with controls is to not touch them at all. Let the browser handle them the best way it can — unless you're providing extra functionality like you can with Chosen.js
Usually, yes, setting a larger font size would help. http://css-tricks.com/dropdown-default-styling/
So, I am developing an app using phonegap and jqm. Everything works great and it's all pretty easy thanks to phonegap build. However, I've started to see some 'stutter issues' that are really annoying. My app at the moment only has two pages and the transition effect between them is 'slide'. The first page has a background color set to it and the second one does not. Some of the issues:
When I navigate from page 1 to page 2, half of the page has the background color from the previous page. It goes away after I do some random swipes on screen.
On one of the pages, I have a regular form with some text input fields and a radio button set at the end. When I move from an input box to the radio button the keyboard slides down but it is replaced by a black area for a short period of time.
The fixed header that I have at the top randomly decides to disappear and reappear again.
These are only few of the annoying ones and these only happen on the mobile device and it works fine on the computer. So, I know it's a performance issue.
I've read up about this on the internet and here on SO and different solution have been proposed like writing custom CSS3 transitions (to take advantage of hardware acceleration) or using something like zepto.js.
What in your opinion would be the best 'cross device compatible' method to overcome these? Is there a way to force hardware acceleration with jquery mobile? Is CSS3 performance even across device platforms?
PS. I have been testing on jelly bean 4.2.2. I am not posting any of my code because they are just plain form elements and some input tags and this happens on multiple pages which are totally different so I am pretty sure this isn't code related.
Any help will be much appreciated.
JQuery writes animations using Javascript which dynamically writes inline styles that change quickly. The issue with that, is that it isn't using the hardware acceleration and if you are testing on a retina device, it animates using pixels as they are a unit of measurement. So it is skipping half of your pixels which causes the stutter.
I have written apps using PhoneGap and the best way I came up was to use CSS3 animations/transitions. Super smooth and they feel just like a native app. You will still use JQuery to add/remove classes, etc., but the movement should come from your CSS.
I have a web app (i used JQM) currently customized to iphone.
all elements are fitted to the page height, but i'm getting a white space on the page bottom.
when viewing the page on pc browser everything is fine, so i guess the problem is related to the iphone screen resolution configuration on some CSS file.
Please view the web page on your iPhone to see the white space (scroll down):
http://aspspider.org/elimiz/check4/MC_v1.0.htm
Help me
I'm not seeing the issue on my iPhone but it sounds like a problem I had on a site.
I fixed it by setting a wrapper surrounding all the content as overflow: hidden. It might take some trial and error to find which element to put this on, and you might need to define height values on elements that dont have height explicitly stated.