I have made a web page, it works perfectly with just any browser except on iOS browsers, a little annoying, strengthens my determination to never buy iOS stuff.
... I want to see a different Web page in an ... scroll-able in the top-down direction. It's very simple in standard HTML / CSS... but on a new iPhone, it becomes junk in the browser ?
Anyone who wants to tell the great, mysterious, unfathomable mystery how the HTML code should be ?
Related
My site renders fine on every browser I’ve tested on both desktop and iPhone. However, on iPad, it cuts off the content at the top, no matter which browser is being used. (Each browser shows a slightly different amount of the content.) Super simple, single page site built with Bootstrap 3.
Would appreciate any pointers about where I went wrong with the code. CSS is not my strong suit; I’m relearning it, so apologies for what I’m sure is a basic question.
In dreamweaver cs6 the live view works fine for displaying the divs. But when it comes to the design and split view. They both display the divs wrong and it is nothing like what is shown on the live view or in a browser. Is there a reason for that? How do I fix it?
You fix it by not using dreamweaver, and just test your site in a real browser.
It's bad enough that modern browsers have slightly different interpretations of HTML/CSS/JS. I wouldn't want to further complicate things by viewing/testing a website in something that isn't a web browser.
If you want a more useful answer, it would help us if you posted screenshots of the site in dreamweaver vs in a browser.
Just started doing some cross-browser testing for my website and there's some weird things happing with my home page in Firefox.
The slider looks to be smaller than the thumbnails below it, the thumbnails are touching each other, and when you resize your browser, the thumbnails don't scale down (they just overlap more). If you look at the site in Chrome, Safari, or Opera (even chrome/safari on iOS), the slider's width is the same as the thumbnails below, there's space between thumbnails, and everything scales properly when resizing the browser.
I'm also noticing some lagging when I hover over the thumbnail (CSS3 animation), again only when I'm in Firefox.
What gives? What am I doing wrong, or does Firefox get goofy with responsive sites? If it matters, I'm using this framework
EDIT: Also, if you click on any of the thumbnails, it seems like the images on THOSE pages look fine and scale properly. Seems like just the home page is affected.
Welcome to the frustrating world of web development. Every browser interprets code differently, THAT is the number one challenge of our industry. Even the same browser foundation interprets differently from version to version. Internet Explorer HAS ALWAYS been the worst browser to design for because it is usually 2-3 iterations behind everyone else. AND you HAVE to worry about IE, because it ships with most PCs, it is the most prevalent browser.
So, you have to think about who your audience is, and design on the platform most appropriate for that platform. For example, if your audience is graphic designers, you are safe to develop for modern browsers. But if your audience is the casual, not-to-techie PC user, you have to tailor your designs for IE. (sorry).
You can use a tool like http://browsershots.org/ during development to see how your site is performing in a wide variety of browsers. Or https://browserlab.adobe.com/en-us/index.html#
You then have to learn about the "hacks" to make your site display similar, regardless of the web platform. THAT is an immense subject area and you will have to learn and do research until you understand it.
BUT ALL OF THAT BEING SAID, THE MOST IMPORTANT DESIGN PROBLEM TODAY IS MAKING A RESPONSIVE WEBSITE THAT ADAPTS TO BOTH LARGER AND SMALLER SCREEN SITES.
Mobile is the new black. Going forward you should ALWAYS develop with mobile in mind, unless you KNOW that your audience is NOT the mobile-type, and that is the exception, rather than the rule.
Added max-width="100%" height="auto" width="100%" into my img tags for the thumbnails and it seems to be working
Here is the website I want to replicate: http://www.voncarcha.com/contact
Here is my website: http://foxweb.marist.edu/users/kf79g/contact.php
I mainly want to replicate his about page and contact page across all screen sizes that are large medium and small. How can I do this with only css like I did with all of my other pages besides the about page and contact page?
All of my code is located in the page source under these files (after right clicking view source on your browser):
screen_styles.css
screen_layout_large.css
screen_layout_small.css
screen_layout_medium.css
contact.php
about.php
I tried absolutely everything I could think of. I tried to replicate his website, but mine simply does not work as smoothly. Mine especially looks terrible on older browsers IE 7-9 and Firefox, while his does not for some reason. I want my site to be optimized to work across all browsers. I do not know what to do anymore. After this is done, my website will finally be finished. Please help me out I need to get this project done as soon as possible. I would really appreciate any assistance.
Media Queries (currently what you're doing with responsive design) are the part of HTML5 and CSS3. So If you try these features in browsers that do not support HTML5, they will not work.
This link says, It can handle media queries in older browsers. You should take a look at it.
You can also take a look at This one
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! :)