A site that we worked on that used to display on iPhone and Blackberry now shows up as blank on both. However, it does display as usual on iPad. To be clear, we never developed a specific mobile site, but it did show up as is. The site can be found at www.ambit-consulting.com. Any ideas?
I tried it on the iOS simulator which emulates iOS4.2 and it looks fine.
Related
I have .. strange problem with website background, elements via scrolling in mobile view (Opera browser, Chrome the same):
they are shaking! I didnt know how to describe such problem so made a video
On mobile phone normal behavie (without shaking), check several different phones.
Source code
What is it???
I don't even know the reason.
I have deployed a personal flutter-web project on firebase and the responsiveness is working fine. As in when the website is opened on a laptop it shows a UI specific for large screens and when it's opened on the mobile phones (chrome browser) it shows UI for mobile screens.
Now the problem is, whenever I check "Desktop Site" in the chrome browser, I get the UI that is meant to be shown for larger screens which is okay, but it looks stretched vertically, and the appbar at the top is also not visible.
so my question is,
Is there a way that I could check whether browser's desktop-site mode is ON?
or any other way that I could just make the website look like a zoom-out version of web UI whenever desktop-site mode is ON?
We were not shown the code. Therefore, it is difficult to say for sure. But I had such problems when I ran the application building without parameter --web-renderer
flutter build web
The point was that by default it uses different renderers (CanvasKit for desktop and HTML for mobile). And since I used things that required CanvasKit, the application in mobile browsers was displayed incorrectly.
Building with the appropriate parameter solved my problem
flutter build web --web-renderer canvaskit
I just made published my website and noticed that the font does not appear the same on mobile and on desktop. The weird thing is that some of the text on mobile is in the correct font, while some of it is not. Can anyone help? Thanks in advance.
Edit: For clarification, my site looks fine when I inspect it (on my laptop) and use Chrome's tool to mimic different mobile displays. However, when I open the site on my phone, some of the styling doesn't look the same.
Dario try linking it with Google fonts if it's available on the Google site. It should work universally on most devices whether or not the font is installed on the users computer.
I'm not an expert in web and I composed and updated my website recently. I ran all the test that I could on DreamWeaver CC and tested on multiple mobile devices (tablet, android and iphone); all seems to work fine. Until I uploaded the site to my server, the site start to act weird.
1st problem:
It is a portfolio website with individual pages to corresponding projects. On each project page, the first image on the lightbox has always gone missing; but clicking into the lightbox I can find the missing image (the preview image and the lightbox image share the same source so if the lightbox can find the image it implies that the image is on the server and the path is correct).
2nd problem:
when the browser is shrink below certain size, a toggle menu will replace the content on the header, clicking the toggle menu will show a pop up menu to site links. For some reason, after uploading the site to server, the toggle menu pop up never work.
3rd problem:
The above problem is never apparent on desktop browser(all image shows up correctly; toggle menu works). To make the problem more complicated, I can't confirm if it is device or browser oriented problem. For example, the site works on chrome browser on my iphone and nexus 5(android), but problem occurs on my xperia tablet(android) chrome browser; on my xperia tablet, the site works perfectly on firefox.
Does anybody has any idea what the potential cause to the problem, and perhaps a direction to a solution?
Here's the link to my site: http://www.itsatommy.com
Thank you for your time and look forward to any reply.
Looks fine to me (Google Chrome), you need to use media queries for some certain resolutions. You also need to use some cross browser css tags lide "-webkit, -moz, -o" etc.
I've built a small basic portfolio page based on a bootstrap template. The top features a blue header with an animated gif I built on top of that with a parallax effect. The animation displays and runs properly on everything EXCEPT for iPhones. Even the Chrome simulator mode for iPhones displays properly. Non iPhones also display it correctly.
I'm definitely a newbie when it comes to front end, and can't figure out how to debug this, since it shows up fine on the Chrome simulator tool where I normally do my debugging.
Any help would be much appreciated.
View my site here--
The Chrome device emulator will help you do most of the work, but it's not an iOS simulator. You can use the iOS simulator in XCode paired with OS X Safari's developer tools (inspect iOS Simulator) if you really want to debug for iOS.