chỉnh kích thước ảnh trên mobi

**** css
- class: lazy-img-product
- itemrop
-nằm trong image

**** chú ý
-màn hình 360 - 140x140
-màn hình 400 - 208x208
-màn hình 640 - 277x277

download: tại đây

jquery slide chi tiết sản phẩm

download :tại đây

slide mobi full màn hình ( kéo + click )

download: tại đây

Danh sách các kích thước màn hình thiết bị

Khi viết CSS cho giao diện Responsive, việc quan trọng nhất là bạn phải nắm được kích thước màn hình của các loại điện thoại thông dụng để có thể viết CSS được như ý và chắc chắn nó hoạt động tốt trên nhiều thiết bị, nhất là các thiết bị thông dụng.

Bạn có thể tham khảo các size chiều rộng của các thiết bị tại đây, nhưng đa phần một dự án bạn chỉ cần tạo các breakpoint CSS như sau:

• max-width: 320px (điện thoại di động, hiển thị chiều dọc)
• max-width: 480px (điện thoại di động, hiển thị chiều ngang)
• max-width: 600px (máy tính bảng, hiển thị chiều dọc)
• max-width: 800px (máy tính bảng, hiển thị chiều ngang)
• max-width: 768px (máy tính bảng loại to, hiển thị chiều dọc)
• max-width: 1024px (máy tính bảng loại to, hiển thị chiều ngang)
• min-width: 1025px (từ size này trở lên là danh cho desktop thông thường).

/* Các CSS này dành cho toàn bộ website và desktop */ body {    background: #fff;    color: 333; }   /* Dành cho điện thoại */ @media all and (max-width: 480px) {   }   /* Dành cho máy tính bảng */ @media all and (max-width: 1024px) { }

Chuyển tên miền khi sử dụng bằng các thiết bị di động

Viết bằng PHP

if(preg_match("/iPhone|iPad|Android|Windows Phone/is", $_SERVER['HTTP_USER_AGENT'])) {
      if($_SERVER['HTTP_HOST']!=="m.bige.vn"){            header("Loaction:http://m.bige.vn");       }}

Viết bằng JS

1.
<script> if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)){       window.location ="http://m.bige.vn/"; }</script>

2.

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);

if (isMobile) {

   jQuery('body').removeClass('ps-static');

   jQuery('body').addClass('ps-phone');

   jQuery('.page').click(function() {

   jQuery('body').removeClass('ind');

      swipe_animate_false();

   });

};

link web: http://vihoangson.vus.vn/chuyen-ten-mien-khi-su-dung-bang-cac-thiet-bi-di-dong/

icon menu mobi

Cách Đơn Giản Để Thêm Icon Danh Mục Vào Giao Diện Phiên Bản Mobile

By Thien Do • 26/08/2013 • Web Development

Ngày nay, có rất nhiều người đang lướt web qua các thiết bị di động, do đó một vài điều trên trang web cần phải được điều chỉnh để phù hợp với những kích cỡ màn hình nhỏ hơn. Điều này bao gồm Web Navigation ( danh mục ).
Biểu tượng dưới đây là biểu tượng phổ biến nhất đại diện cho “mobile menu/navigation”:

Trong bài viết này, chúng ta sẽ có một số cách để thêm vào các navigation icon dễ dàng nhất.

Sử Dụng Hình Ảnh Bitmap

Mọi người đều biết làm thế nào để tạo ra một hình ảnh Bitmap. Chúng ta chỉ đơn giản tạo ra biểu tượng này trong Photoshop, lưu nó lại ( có thể là PNG hoặc JPG ) và sau đó gắn nó vào thuộc tính background-image trong CSS.
Tuy nhiên, hình ảnh bitmap sẽ thiếu khả năng mở rộng. Đặc biệt, khi chúng ta phóng to hình ảnh, nó có thể bị mờ hoặc bị bể. Với các thiết bị có độ phân giải rất cao trên thị trường ngày nay, khả năng mở rộng hình ảnh là một trong những yếu tố quan trọng mà bạn không thể bỏ qua.

Sử Dụng Bootstrap

Bằng cách sử dụng Bootstrap ( một front-end development framework ), “navigation icon” sẽ hiển thị trong các màn hình kích cỡ nhỏ hơn. Nó sử dụng ba yếu tố <span>:

<button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
    <span class="icon-bar"></span>
</button>

Mặc dù biểu tượng mong muốn có thể đạt được thông qua style, nhưng chỉ hiển thị biểu tượng nhỏ. Vì vậy, chúng ta hãy tìm một cách tốt hơn.

Sử Dụng Font Icon

Một cách khác để thực hiện là bằng cách sử dụng font icon. Một số font chữ cung cấp các biểu tượng này trong thiết lập của chúng, chẳng hạn như Font Awesome và EnTypo. Để hiển thị các biểu tượng, chúng ta đơn giản là thêm các ký tự tương ứng, như thể hiện trong bài viết này.
Một số lợi thế của việc hiển thị icon với font chữ là các icon rất dễ dàng thay đổi thông qua CSS và có độ phân giải độc lập. Mặt khác, nó cũng có một số nhược điểm: các tập tin có thể là rất lớn phụ thuộc vào bao nhiêu ký tự được lưu lại, và chúng ta cần ít nhất bốn định dạng tập tin khác nhau bao gồm khả năng tương thích trình duyệt, đó là một số việc để chỉ hiển thị một biểu tượng.

“Trigram For Heaven”

Đáng ngạc nhiên, có một ký tự trong HTML được gọi là Trigram For Heaven. Đây ( có thể ) là cách tốt nhất mà mình có thể đã tìm thấy. Đơn giản chỉ cần thêm vào HTML ( ☰ ) và bạn sẽ thấy được biểu tượng này trên web của bạn.

Sau đó chúng ta có thể thay đổi nó với CSS, chẳng hạn như thay đổi màu sắc hoặc kích thước mà không sợ làm mất đi độ sắc nét của nó. Hơn nữa, bạn có thể vào thư viện này để tìm hiểu thêm nhiều ký tự đặc biệt khác của HTML.

giao diện mobi ( cột không duy chuyển )

download: tại đây

css trên giao diện mobile

<link rel="alternate" href="http://ten_website" hreflang="vi-vn" />

<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.ten_website/">
<link rel="alternate" media="handheld" href="http://m.ten_website/" />

**** subdomain

**** deca.vn

**** css giao dien dien thoai